zoukankan      html  css  js  c++  java
  • a标签,选中当前菜单后高亮

    代码如下:

    1).样式:

    .nav {
    WIDTH: 100%;
    HEIGHT: 60px;
    BACKGROUND-COLOR:#000000;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    }
    .nav UL {
    PADDING: 0px;
    DISPLAY: block;
    MARGIN: 0px;
    LIST-STYLE-TYPE: none;
    HEIGHT: 60px;
    }
    .nav LI {
    BORDER-RIGHT: #ffffff 1px solid;
    DISPLAY: block;
    FLOAT: left;
    200px;
    text-align:center;
    font-size:14px;
    }
    .nav LI A {
    DISPLAY: block;
    FONT-WEIGHT: none;
    COLOR: #ffffff;
    LINE-HEIGHT: 60px;
    TEXT-DECORATION: none;
    }

    .current{
    color:#ffffff;
    background:blue;
    }
    .nav li#date{
    color:#ffffff;
    PADDING:2px 15px 0;
    }

    2).html部分

    <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="#" 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>

    3).js部分,用js的时候记得要引入jQuery插件,版本不限制。

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

    ps:温馨提示这个a标签只支持空连接,有链接的后面回更新。

    多多指教,我还是前端小生
  • 相关阅读:
    XAF 如何在工具栏显示多参数
    XAF Study Recources
    常用工具
    Linux下Kill函数用法
    ipv6相关转换
    宣布回归
    微软夏令营
    APEX SDK阅后感
    寻求offer,开始记录我的征程
    衣服模拟结果
  • 原文地址:https://www.cnblogs.com/yangslin/p/9347103.html
Copyright © 2011-2022 走看看