Javascript 基于数据属性和类切换截面可见性

我有一个菜单，将用于切换页面的不同部分。菜单中的每个列表项都有一个数据属性。此数据属性与我要切换的节的类匹配

如何将活动菜单项的数据属性与我想在主要内容中切换的部分的类相匹配

感谢您的帮助

代码笔

标记： 应用程序菜单

<ul class="tablet--nav__Parent">
<li data-name="js-classifieds--description" class="active">
  <i class="icon-description"></i>
  <a href="#">Description</a></li>
<li data-name="js-classifieds-specification" class="">
  <i class="icon-specification"></i>
  <a href="#">Specification</a>
</li>
<li data-name="js-classifieds-reviews" class="">
  <i class="icon-userreviews"></i>
  <a href="#">User Reviews</a></li>
<li data-name="classifieds--valuation" class="">
  <i class="icon-roadtests"></i>
  <a href="#">Road Tests &amp; Reviews</a>
</li>

理想情况下，我可以做如下工作：

$('.main-content > div').find(activeElement).addClass('active
section').siblings().removeClass('active-section');

---

不幸的是，这不起作用。

我没有看到在哪里调用

toggleStates

函数。下面的代码应该可以做到这一点，请尝试一下：

// hide for all section
$('.main-content > div').removeClass('active').hide();
// current click on a tag
$('.tablet--nav__Parent a').click(function () { 
  // remove class for all li element
  $('.tablet--nav__Parent li').removeClass('active');
  // cache parent element
  var current = $(this).closest('li');
  // get data attributes values from li element
  var dataName = current.data('name');
  // add active class to currenct click li element
  current.addClass('active');
  // remove class active from all section , and hide them
  $('.main-content > div').removeClass('active').hide();
  // add class to MATCHED section and show it
  $('.'+dataName).addClass('active').show();        
});

我隐藏了初始状态的所有部分，用于演示。您可以将其更改为应首先显示哪个部分

---

是的，太棒了！这很有魅力。非常感谢你！

$('.main-content > div').find(activeElement).addClass('active
section').siblings().removeClass('active-section');

// hide for all section
$('.main-content > div').removeClass('active').hide();
// current click on a tag
$('.tablet--nav__Parent a').click(function () { 
  // remove class for all li element
  $('.tablet--nav__Parent li').removeClass('active');
  // cache parent element
  var current = $(this).closest('li');
  // get data attributes values from li element
  var dataName = current.data('name');
  // add active class to currenct click li element
  current.addClass('active');
  // remove class active from all section , and hide them
  $('.main-content > div').removeClass('active').hide();
  // add class to MATCHED section and show it
  $('.'+dataName).addClass('active').show();        
});