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

Question

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

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

感谢任何帮助！

Codepen 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');

很遗憾，这不起作用。

- Antonio Vasilev

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();        
});

我会为初始状态隐藏所有部分，这是演示目的。您可以更改它以显示应首先显示哪个部分。

演示

- Norlihazmey Ghazali

---

是的，太完美了！它像魔法一样运作。非常感谢你！ - Antonio Vasilev