zoukankan      html  css  js  c++  java
  • 用js实现导航菜单点击切换选中时高亮状态

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


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

    实现代码:

    <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; 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 

  • 相关阅读:
    Linux架构浅谈
    SP3精密星历简介
    sprintf的用法
    插值 回归 拟合 逼近的区别
    Linux grep命令
    看我如何下载韩寒博客文章笔记
    多线程下载
    网络爬虫python教程
    爬虫——博客实例
    Android Studio安装
  • 原文地址:https://www.cnblogs.com/houdj/p/5293092.html
Copyright © 2011-2022 走看看