0

我正在做一个项目，我有一个带有 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>

对此的任何帮助将不胜感激

4

2 回答 2

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 回答
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 回答