用js实现导航菜单点击切换选中时高亮状态
2016-03-18 17:49
846 查看
随着用户点击导航或菜单上不同的页面,出现此选项高亮显示或变为一个新的样式是经常用到的。实现它所用的原理就是通过js中的location.href得到当前页面的地址,然后在与导航上的链接地址匹对,相同的就用一个css样式标记。此方法支持动态链接和静态链接多种形式。
实现代码:
<script type="text/javascript" src="http://www.daixiaorui.com/Public/js/jquery.min.js"></script>
<style>
.menu { padding:0; margin:0; list-style-type:none;}
.menu li { background:#FFD1A4; margin-right:1px; float:left; color:#fff; }
.menu li a { display:block; width:80px; text-align:center; height:32px; line-height:32px; color:#fff; font-size:13px; text-decoration:none;}
.cur{ background:#D96C00; font-weight:bold;}
</style>
<ul class="menu" id="menu">
<li><a href="demo.html">首页</a></li>
<li><a href="te1.html">PHP综合</a></li>
<li><a href="te2.html">Ecshop</a></li>
</ul>
<script type="text/javascript">
var urlstr = location.href;
//alert((urlstr + '/').indexOf($(this).attr('href')));
var urlstatus=false;
$("#menu a").each(function () {
if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
$(this).addClass('cur'); urlstatus = true;
} else {
$(this).removeClass('cur');
}
});
if (!urlstatus) {$("#menu a").eq(0).addClass('cur'); }
</script>
演示1(静态链接的效果):http://www.daixiaorui.com/Public/demo/js/navCur/demo.html
演示2(动态链接的效果):http://www.daixiaorui.com/Public/demo/js/navCur/demo1.html?aa=1
实现代码:
<script type="text/javascript" src="http://www.daixiaorui.com/Public/js/jquery.min.js"></script>
<style>
.menu { padding:0; margin:0; list-style-type:none;}
.menu li { background:#FFD1A4; margin-right:1px; float:left; color:#fff; }
.menu li a { display:block; width:80px; text-align:center; height:32px; line-height:32px; color:#fff; font-size:13px; text-decoration:none;}
.cur{ background:#D96C00; font-weight:bold;}
</style>
<ul class="menu" id="menu">
<li><a href="demo.html">首页</a></li>
<li><a href="te1.html">PHP综合</a></li>
<li><a href="te2.html">Ecshop</a></li>
</ul>
<script type="text/javascript">
var urlstr = location.href;
//alert((urlstr + '/').indexOf($(this).attr('href')));
var urlstatus=false;
$("#menu a").each(function () {
if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
$(this).addClass('cur'); urlstatus = true;
} else {
$(this).removeClass('cur');
}
});
if (!urlstatus) {$("#menu a").eq(0).addClass('cur'); }
</script>
演示1(静态链接的效果):http://www.daixiaorui.com/Public/demo/js/navCur/demo.html
演示2(动态链接的效果):http://www.daixiaorui.com/Public/demo/js/navCur/demo1.html?aa=1
相关文章推荐
- JSTL 核心标签库 使用
- js 获取随机字符串
- js之form表单的获取
- Jsoup消除不受信任的HTML (来防止XSS攻击)
- JavaScript 语言中的 this
- Javascript进阶篇——总结--DOM案例+选项卡效果
- JavaScript学习笔记:数组求和方法(待续中...)
- 第一次接触javascript脚本:进度条脚本
- 分享js粘帖屏幕截图到web页面插件screenshot-paste
- JS Date日期排序
- (六)ExtJs小例子之窗体组件(Window)
- 面向对象的js程序设计
- js api 实现钉钉免登
- JS Date函数处理
- ie11下alt+d不能用js监听问题
- Django返回Json
- Javascript中的位运算符
- JSP编译成Servlet(三)JSP编译后的Servlet
- JSP编译成Servlet(三)JSP编译后的Servlet
- 获取js自身路径的方法