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标签只支持空连接,有链接的后面回更新。

    多多指教,我还是前端小生
  • 相关阅读:
    PHP里json_encode()与json_decod()区别
    数组进行排序
    tp5利用自带上传类实现单个文件与多文件上传
    mkdir() Permission denied 报错问题
    如何快速熟悉新项目的代码?
    Tp5自定义路径写入日志
    spring解决循环依赖
    spring注解的使用
    ssm的整合
    编程知识总结
  • 原文地址:https://www.cnblogs.com/yangslin/p/9347103.html
Copyright © 2011-2022 走看看