如果元素類等於導航元素值，然後隱藏元素

Question

我想做一個動態導航，所以當導航項被點擊時，它顯示與導航值相同的類的元素。

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