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

尝试 -

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

Answer 2

我不确定这是否是您要找的？您是否尝试根据点击的导航元素显示内容。如果是这样看看这里？ http://jsfiddle.net/cQt5p/。我个人会使用数据属性，而不是使用类来显示和隐藏相关元素。

如果element class等于nav元素值，则隐藏元素

2 个答案: