魔酷阁模板平台,坚持走低价精品路线!
分享/出售模板
当前位置:主页 > 建站教程 > 建站技术 >

JS实现导航点击高亮显示

发布时间:2017-03-13 来源:互联网 浏览: 关键词:js 导航高亮 

 本文为大家讲的是如何使用js实现点击选中当前导航菜单后按钮背景高亮显示,能达到的效果就是当我们点击网页导航菜单的某一个栏目时,该导航菜单按钮的背景颜色高亮显示或者变换背景图片,以此来丰富网页导航菜单的显示效果,让整个网页看起来更加炫酷生动。

通过js实现此效果的原理是使用js中的location.href来获得当前页面的URL链接地址,然后通过indexOf()方法与导航菜单URL链接地址进行匹配,如果匹配成功,就给该导航菜单按钮背景增加一个名为curument的css样式,此样式的背景可以设置成一个HTML颜色代码也可以设置成一个图片格式背景,这样就实现了js点击当前菜单高亮显示的功能。
    效果截图:
    js导航高亮
    具体实现代码如下:

<script type="text/javascript" src="http://www.haodoxi.com/dede58/js/jquery.min.js"></script>
    <style>
      .nav { margin:0; padding:0; list-style-type:none;}
      .nav li { float:left; background:#FFD1A4; margin-right:1px; color:#fff; }
      .nav li a { display:block; width:120px; height:45px; line-height:45px; text-align:center; color:#fff; font-size:16px; text-decoration:none;}
      .curument{ background:#D96C00; font-weight:bold;}
    </style>
    <ul class="nav" id="nav">
      <li><a href="index.html">首页</a></li>
      <li><a href="1.html">栏目一</a></li>
      <li><a href="2.html">栏目二</a></li>
      <li><a href="3.html">栏目三</a></li>
      <li><a href="4.html">栏目四</a></li>
    </ul>
    <script type="text/javascript">
      var urlstr = location.href;
      var urlstatus=false;
      $("#nav a").each(function () {  
        if ((urlstr + '/').indexOf($(this).attr('href')) > -1&&$(this).attr('href')!='') {
          $(this).addClass('curument'); urlstatus = true;
        } else {
          $(this).removeClass('curument');
        }
      });
      if (!urlstatus) {$("#nav a").eq(0).addClass('curument'); }
    </script>
    以上就是实现js点击当前菜单高亮显示的全部代码,如果你想运用在自己的网页中,需要具有一定的前端编程经验,可以参考以下指导方法进行操作:
    1.首先需要引入jquery.min.js文件到你的网页代码中;
    2.把代码中的css代码经过修改处理放入你的css文件中,与你当前菜单样式的css代码进行对比修改;
    3.把以上代码中的js代码部分放入你的js文件中;

    4.打开你的html页面,把导航书写方式修改成上面导航代码的形式。

    最后提一点,如果首页用的是/链接地址的话是识别不了的,解决办法就是/后面空一格即可。即<a href="/ ">首页</a>

魔酷阁-专业织梦模板下载平台,转载请注明出处:http://www.mokuge.com/webdesign/1318.html
责任编辑:MOKUGE
共有人阅读,期待你的评论!评论
  • POWERED BY DEDECMS COPYRIGHT©2013-2017 魔酷阁 苏ICP备13059281号