泰安国强网络工作室专注于泰安网站建设/泰安手机网站建设/泰安网站优化/泰安微信营销等服务,是值得您信赖的泰安网络公司。

泰安网站建设热线13678683132
15269847585

泰安国强网络新闻中心

咨询,就免费赠送域名与服务器,咨询热线:13678683132当前位置: 网站首页 > 新闻动态 > 随笔备忘 >
联系我们
业务手机:13678683132
技术手机:15269847585
E-mail:a@taianx.com
地址: 泰安市五马路龙河商贸大厦3号楼313室

用js实现导航菜单当前页面点击切换选中时高亮状态

文章来源:未知 作者:国强工作室 时间:2015-05-04 12:20 点击:

随着用户点击导航或菜单上不同的页面,出现此选项高亮显示或变为一个新的样式是经常用到的。实现它所用的原理就是通过js中的location.href得到当前页面的地址,然后在与导航上的链接地址匹对,相同的就用一个css样式标记。此方法支持动态链接和静态链接多种形式。
 
用js实现导航菜单点击切换选中时高亮状态 如下演示图片:

导航菜单选中高亮

 
实现代码:
 
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.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>

很简单实用的代码。特别是不方便在导航上面添加样式的时候,可以选择使用这个代码。

泰安国强网络工作室


  国强网络凭借多年的网站建设经验,坚持以“帮助中小企业实现网络全网营销”为宗旨,成功的为数千多家的中小企业实现互联网盈利,得到了客户的一致好评。如你有任何关于网站建设的疑问,请立即点击咨询国强网络资深营销专家或拨打免费咨询热线:13678683132,我们会详细为你一一解答你心中的疑难。 在线咨询

 

泰安国强网络能为您做什么

 

本文由 泰安网站建设 整理发布,本文地址为:https://www.taianx.com/news/riji/597.html 转载请注明出处!

Copyright © www.taianx.com 泰安国强网络工作室 ALL RIGHT RESERVED. 鲁ICP备15029540号-1
地址:泰安市五马路龙河商贸大厦3号楼313室 邮编:271000 业务手机:13678683132 技术手机:15269847585 电话:0538-8203132 Mail:A@taianx.com
泰安网站建设公司-国强工作室专注于泰安网站建设、泰安手机网站制作、泰安营销型网站制作、泰安微信营销、泰安app开发等服务,是值得您信赖的泰安网络公司。 鲁ICP备15029540号-1 
  • 泰安网站建设业务咨询
  • 泰安网站建设技术支持
  • 国强工作室官方微信
返回顶部