0

動的ナビゲーションを作成しようとしているので、ナビゲーションアイテムをクリックすると、ナビゲーション値と同じクラスの要素が表示されます。

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>

しかし、私はそれを機能させることができません。皆さん、助けてください。

よろしくお願いします

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 に答える