0

我正在尝试制作动态导航，因此当单击导航项时，它会显示与导航值具有相同类的元素。

查询：

$('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>

但我不能让它工作你们能帮忙吗？

此致

4

2 回答 2

2

尝试 -

$('section nav a').on({
        click: function() {
            var navElement = $(this).text();
            if ( $('article').hasClass(navElement) ) {
               $(this).hide();
            }
    }
});
于 2012-06-28T06:40:13.020 回答
0

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

于 2012-06-28T06:50:52.737 回答