0

私は6つのリンクを持つ水平ナビゲーションバーを持っているプロジェクトに取り組んでいます。そのうちの3つは同じ水平バーのサブナビゲーションの一部です。リンクはアイコンで表されます。メインナビゲーションアイコンの1つをクリックしたときに、サブナビゲーションを動的に変更する最も簡単な方法を探しています。

[ Home - Search ]{ home1 - home2 - home3 }[ Add ]

検索を選択すると、次のように変わります。

[ Home - Search ]{ search1 - search2 - search3 }[ Add ]

これは現在のバーのHTMLです。現在、構造が壊れているため、置換アイコンのリンクは作成されていません。

<nav id="navBar">
    <ul>
        <div id="mainNav">
            <li><a id="activeLink" class="homeLink" href="#">Home<a/></li>
            <li><a class="searchLink" href=#>Search<a/></li>
        </div>
        <div id="subNav">
            <li><a class="feedLink" href=#>Feed<a/></li>            
            <li><a class="messagesLink" href=#>Messages<a/></li>
            <li><a class="connectionsLink" href=#>Connections<a/></li>
        </div>
        <div id="mainNav">
            <li><a class="addLink" href=#>Add<a/></li>
        </div>
    </ul>
</nav>
<nav id="searchBar"></nav>

これに関する助けをいただければ幸いです

4

2 に答える 2

0

このコードは、に渡されたタイトルに基づいて、新しいクラスと新しいテキストで各リンクを変更しますresponder。

var responder = function(components) {
    return function() {
        $.each($("#subNav a"), function(index, element) {
            $(element).text(components[index]);
            $(element).attr("class", components[index]+"Link");
        });
    }
};
$(".homeLink").click(responder(["home1", "home2", "home3"]))
$(".searchLink").click(responder(["search1", "search2", "search3"]))

オプションを追加するのは、イベントに添付responder([titles...])するのと同じくらい簡単です。click

于 2012-06-23T20:36:33.897 に答える
0

私はあなたがそれを本当に賢くする必要があるかどうかわかりません。それらをまとめて.hiddenクラスを切り替えるだけです。

CSS

.hidden {
    display: none;
}

HTML

<nav id="navBar">
    <ul>
        <li id="mainNav">
            <ul>
                <li><a id="activeLink" class="homeLink" href="#">Home</a></li>
                <li><a class="searchLink" href="#">Search</a></li>
            </ul>
        </li>
        <li id="subNav">
            <ul>
                <li><a class="feedLink" href="#">Feed</a></li>            
                <li><a class="messagesLink" href="#">Messages</a></li>
                <li><a class="connectionsLink" href="#">Connections</a></li>
            </ul>
        </li>
        <li id="searchNav" class="hidden">
            <ul>
                <li><a href="#">Search 1</a></li>            
                <li><a href="#">Search 2</a></li>
                <li><a href="#">Search 3</a></li>
            </ul>
        </li>
        <li id="mainNav">
            <ul>
                <li><a class="addLink" href="#">Add</a></li>
            </ul>
        </li>
    </ul>
</nav>

jQuery

$(document).ready(function(){
    var $subnavs = $('#subNav, #searchNav'),
        $search = $('#mainNav .searchLink');

    $search.click(function(){
        $subnavs.toggleClass('hidden');

        return false;
    });
});

http://jsfiddle.net/userdude/eJm2z/1

ひどく醜いメニューのスタイリングはデモンストレーション専用であることに注意してください...

于 2012-06-23T20:56:40.847 に答える