动态导航链接

Question

我正在做一个项目，其中我有一个带有 6 个链接的水平导航栏，其中 3 个是同一水平栏中子导航的一部分。链接用图标表示。我正在寻找在单击其中一个主要导航图标时动态更改子导航的最简单方法。

[ 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>

任何这方面的帮助将不胜感激

Answer 1

我不知道

你需要真正聪明地使用它。只需将它们放在一起并切换一个.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

请注意，这种丑陋的菜单样式仅用于演示...

Answer 2

此代码根据传递给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事件一样简单;