javascript - 根据数据属性和类切换部分可见性

Question

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

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

感谢任何帮助!

密码本 link

标记:

应用菜单

<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 class="main-content" role="main-content">
  <div class="js-classifieds--description active">
    <section class="advert-description">
      <p>Asteroid Grey</p>
    </section>
  </div>
  <div class="js-classifieds-specification">
    <div>
      <p>Room Beige</p>
    </div>

  </div>
  <div class="js-classifieds-reviews">
    <div>
      <p>Random Review</p>
    </div>
  </div>

我可以在菜单上切换事件类，并根据该类显示我的相关部分。然后我会检查事件菜单项的数据属性是否与我想要切换的项目的类相匹配，这是我正在努力解决的问题。 我有以下 JS

    var toggleStates = function() {
  //Find all li[s] in .tablet--nav
  var $tabletnavLi = $(".tablet--nav__Parent").find("li");
  //Loop through them and take car of active class on current item
  $($tabletnavLi).each(function() {
    var $self = $(this);
    $self.click(function() {
      //Add active class to active tab
      $self.addClass("active");
      var activeElement = ($(".active").data().name);
      //Remove from siblings - other elements on page
      $self.siblings().removeClass("active");
    });
  });
};

理想情况下，我可以做类似的事情:

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

不幸的是，这不起作用。

Answer 1

我没有看到你在哪里调用了 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();        
});

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

DEMO