zoukankan      html  css  js  c++  java
  • js选中当前菜单后高亮显示的导航条

    <!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 charset="utf-8">
    <title>js选中当前菜单后高亮</title>
    <style type="text/css">
    
    .nav {
        MARGIN: 1px 0; 
        WIDTH: 100%; 
        FONT-FAMILY: verdana; 
        HEIGHT: 21px; 
        BACKGROUND-COLOR: #970B0B;
        font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
    }
    .nav UL {
        PADDING: 0px; 
        DISPLAY: block; 
        MARGIN: 0px; 
        LIST-STYLE-TYPE: none; 
        HEIGHT: 21px; 
        BACKGROUND-COLOR: #970B0B;
        COLOR: #ffffff; 
    }
    .nav LI {
        BORDER-RIGHT: #ffffff 1px solid; 
        DISPLAY: block; 
        FLOAT: left; 
        HEIGHT: 21px;
        font-family:Arial, Helvetica, sans-serif;
        font-size:12px;
    }
    .nav LI A {
        PADDING:1px 15px 0; 
        DISPLAY: block; 
        FONT-WEIGHT: none; 
        COLOR: #ffffff; 
        LINE-HEIGHT: 20px; 
        TEXT-DECORATION: none;
    }
    .nav LI A:hover {
        COLOR:#562505; 
        BACKGROUND-COLOR: #f4f524; 
        TEXT-DECORATION: none;
    }
    .current{
      color:#ffffff;
      background:blue;
    }
    .nav li#date{
      color:#ffffff;
      PADDING:2px 15px 0; 
    }
    </style>
    <script language="javascript" type="text/javascript">
    var  $c=function(array){var nArray = [];for (var i=0;i<array.length;i++) nArray.push(array[i]);return nArray;};
    Array.prototype.each=function(func){
    for(var i=0,l=this.length;i<l;i++) {func(this[i],i);};
    };
    document .getElementsByClassName=function(cn){
    var hasClass=function(w,Name){
    var hasClass = false;
    w.className.split(' ').each(function(s){
    if (s == Name) hasClass = true;
    });
    return hasClass;
    }; 
    var elems =document.getElementsByTagName("*")||document.all;
                var elemList = [];
               $c(elems).each(function(e){
    if(hasClass(e,cn)){elemList.push(e);}
               })
            return $c(elemList);
    };        
    function change_bg(obj){
    var a=document.getElementsByClassName("nav")[0].getElementsByTagName("a");
    for(var i=0;i<a.length;i++){a[i].className="";}
    obj.className="current";
    }
    </script>
    </head>
    <body>
    <DIV class="nav">
      <UL>
        <LI><A href="#" onclick="change_bg(this)">源码首页</A></LI>
        <LI><A href="#" onclick="change_bg(this)">网页特效</A> </LI>
        <LI><a href="#" class="current" onclick="change_bg(this)">精品源码</a> </LI>
        <LI><A href="#" onclick="change_bg(this)">ASP源码</A> </LI>
        <LI><A href="#" onclick="change_bg(this)">PHP源码</A> </LI>
        <LI><A href="#" onclick="change_bg(this)">JSP源码</A> </LI>
        <LI><A href="#" onclick="change_bg(this)">脚本资源</A> </LI>
        <LI><A href="#" onclick="change_bg(this)">软件下载</A> </LI>
      </UL>
    </DIV>
    </body>
    </html>
  • 相关阅读:
    四则运算实现
    第四周例行报告
    代码规范,结对要求
    第三周例行报告
    第三周作业3功能测试
    第二周例行报告
    第一次作业汇总
    2017/2/24:Maven的pom jar war的区别
    oracle的常用99条语句
    2017/2/21:配置自己的中文乱码拦截器
  • 原文地址:https://www.cnblogs.com/qhorse/p/4765581.html
Copyright © 2011-2022 走看看