zoukankan      html  css  js  c++  java
  • 菜单栏点击后高亮

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>菜单栏选中高亮</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.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>
    </head>
    <body>
    <ul class="menu" id="menu">
      <li><a href="#">首页</a></li>
      <li><a href="#">PHP综合</a></li>
      <li><a href="#">Ecshop</a></li>
    </ul>
    <script type="text/javascript">

      var urlstr = location.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>
    </body>
    </html>

    ps:主要思想遍历DOM 树

  • 相关阅读:
    比特币搬砖对冲策略Python源码
    30行JavaScript代码实现一个比特币量化策略
    JBOSS EJB发布WebService
    位运算小练习(1)
    第二周作业
    第一周作业
    CentOS虚拟机NAT方式无法上网
    go语言实现排序算法
    Ubuntu更换科大源
    将Windows下的文件同步到Linux下
  • 原文地址:https://www.cnblogs.com/pcx105/p/7216831.html
Copyright © 2011-2022 走看看