动态导航链接
Dynamic Navigation Links
我正在做一个项目,其中我有一个带有 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>
任何这方面的帮助将不胜感激
我不知道
你需要真正聪明地使用它。只需将它们放在一起并切换一个.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
请注意,这种丑陋的菜单样式仅用于演示...
此代码根据传递给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
事件一样简单;
相关文章:
- 使用jQuery库Packey来制作卡片布局,我可以用导航链接重新订购
- (html/css/javascript)试图使导航栏中的“当前页面”链接变成不同的颜色
- 导航到链接9000次
- 当主导航链接悬停时,在侧菜单中显示链接
- Angular UI&引导程序:点击链接时折叠移动导航栏
- 单击链接时折叠响应式导航
- 禁用导航链接上的聚焦行为
- 第二个引导程序导航栏链接打开第一个(错误的)导航栏;jquery
- 在没有服务器端脚本的情况下跨多个页面链接导航栏
- 与 AJAX 的可链接导航
- 在内联tinyMCE中保留超链接导航
- 共享Web工作者是否在单个页面重新加载、链接导航中保持不变
- 如何判断一个Angularjs页面是通过刷新加载的还是通过链接导航的
- HTML
- 动画锚链接导航
- 从另一个html中的超链接导航到页面中的特定选项卡(使用dojo tabcontainer)
- React.js——LinkContainer.阻止链接导航
- 创建一个链接导航到谷歌地图上的地图标记
- jQuery链接导航功能
- 自定义链接导航的谷歌搜索快捷方式