Если класс элемента равен значению элемента nav, то скройте элемент

Question

Я пытаюсь сделать динамический nav, поэтому, когда элемент навигации нажимается, он показывает элементы с тем же классом, что и значение nav.

Jquery:

$('section nav a').on({ 
     click: function() { 
      var navElement = $(this).val(); 
      if ($('article').attr('class') != navElement) { 
     $(this).hide(); 
      } 
    } 
}); 

Html:

<section> 
    <div class="inside"> 
     <nav> 
<a href="#" title="typografi&ombrydning">Typografi & Ombrydning</a> 
<a href="#" title="grafiskdesign">Grafisk design</a> 
<a href="#" title="grafik&billeder">Grafik & Billeder</a> 
<a name="Workflow" class="workflow" title="workflow" href="#">Workflow</a> </nav> 
     <article class="typografi&ombrydning workflow"> <img src="images/imgtest.jpg" width="230" height="210"> 
      <h2>Aphyxion</h2> 
      <p class="time">Marts 15, 2012</p> 
      <p>Billeder fra koncerten med aphyxion og molested på elværket i helsingør</p> 
      <a class="read_more" href="#">Læs mere...</a> </article> 
     <article class="grafik&billeder"> <img src="images/imgtest.jpg" width="230" height="210"> 
      <h2>Aphyxion</h2> 
      <p class="time">Marts 15, 2012</p> 
      <p>Billeder fra koncerten med aphyxion og molested på elværket i helsingør</p> 
      <a class="read_more" href="#">Læs mere...</a> </article> 
     <article class="workflow"> <img src="images/imgtest.jpg" width="230" height="210"> 
      <h2>Aphyxion</h2> 
      <p class="time">Marts 15, 2012</p> 
      <p>Billeder fra koncerten med aphyxion og molested på elværket i helsingør</p> 
      <a class="read_more" href="#">Læs mere...</a> </article> 
     <article class="grafiskdesign grafik&billeder"> <img src="images/imgtest.jpg" width="230" height="210"> 
      <h2>Aphyxion</h2> 
      <p class="time">Marts 15, 2012</p> 
      <p>Billeder fra koncerten med aphyxion og molested på elværket i helsingør</p> 
      <a class="read_more" href="#">Læs mere...</a> </article> 
     <article class="workflow"> <img src="images/imgtest.jpg" width="230" height="210"> 
      <h2>Aphyxion</h2> 
      <p class="time">Marts 15, 2012</p> 
      <p>Billeder fra koncerten med aphyxion og molested på elværket i helsingør</p> 
      <a class="read_more" href="#">Læs mere...</a> </article> 
     <div class="clear"></div> 
    </div> 
</section> 

Но я не могу заставить его работать Может вы, ребята, пожалуйста, помогите.

С наилучшими пожеланиями

Answer 1

Я не уверен, если это то, что вы ищете? Вы пытаетесь показать содержимое на основе щелчка навигационного элемента. Если так, взгляните сюда? http://jsfiddle.net/cQt5p/. Я лично использовал атрибуты данных, а не классы, чтобы показывать и скрывать связанные элементы.

Answer 2

попытка -

$('section nav a').on({ 
     click: function() { 
      var navElement = $(this).text(); 
      if ($('article').hasClass(navElement)) { 
       $(this).hide(); 
      } 
    } 
});