点击栏目后变色

作者 :
免费
  • 正文
  • 鼠标点击后栏目变色,需要做JS做判断,根据ID值,还有网站的访问地址,||代表或,两个域名访问时都会有相同的效果。方法如下:

    <title>点击栏目后变色</title>
    <link  href="./img/index.css" type="text/css" rel="stylesheet" />
    </head>
    <body bgcolor="#111">
    <!--导航-->
    <div id="header">
    <div><img src="img/banner.png" alt=""></div>
    <ul id="ServiceListTable">
    <li><a href="#"></a></li>
    <li id="present1"><a href="1.htm">艺成概况</a></li>
    <li id="present2"><a href="2.htm">新闻通知</a></li>
    <li id="present3"><a href="3.htm">课程设置</a></li>
    <li id="present4"><a href="#">联系我们</a></li>
    </ul>
    <div></div>
    </div>
    <script>
    var url=window.location.href;
    if(url=="http://localhost/1.htm"||url=="http://127.0.0.1/1.htm"){
    present1.style.background="#666666";
    var aa=present1.getElementsByTagName("a");
    aa[0].style.color="#ffffff";
    }else if(url=="http://localhost/2.htm"||url=="http://127.0.0.1/2.htm"){
    present2.style.background="#666666";
    var aa=present2.getElementsByTagName("a");
    aa[0].style.color="#ffffff";
    }else if(url=="http://localhost/3.htm"||url=="http://127.0.0.1/3.htm"){
    present3.style.background="#666666";
    var aa=present3.getElementsByTagName("a");
    aa[0].style.color="#ffffff";
    var aa=subnav.getElementsByTagName("a");
    aa[0].style.background="#990000";
    aa[0].style.color="#ffffff";
    }else if(url=="http://www.91yicheng.com/a/shiziduiwu/"||url=="http://www.91yicheng.cn/a/shiziduiwu/"){
    present4.style.background="#666666";
    var aa=present4.getElementsByTagName("a");
    aa[0].style.color="#ffffff";
    }else if(url=="http://www.91yicheng.com/a/jiaoxuehuanjing/20130925/19.html"||url=="http://www.91yicheng.cn/a/jiaoxuehuanjing/20130925/19.html"){
    present5.style.background="#666666";
    var aa=present5.getElementsByTagName("a");
    aa[0].style.color="#ffffff";
    }else if(url=="http://www.91yicheng.com/a/lianxiwomen/20130920/2.html"||url=="http://www.91yicheng.cn/a/lianxiwomen/20130920/2.html"){
    present6.style.background="#666666";
    var aa=present6.getElementsByTagName("a");
    aa[0].style.color="#ffffff";
    }else if(url=="http://www.91yicheng.com/a/hezuohuoban/2013/0927/30.html"||url=="http://www.91yicheng.cn/a/hezuohuoban/2013/0927/30.html"){
    present7.style.background="#666666";
    var aa=present7.getElementsByTagName("a");
    aa[0].style.color="#ffffff";
    }else if(url=="http://www.91yicheng.com/a/kechengshezhi/20131021/35.html"||url=="http://www.91yicheng.cn/a/kechengshezhi/20131021/35.html"){
    present3.style.background="#666666";
    var aa=present3.getElementsByTagName("a");
    aa[0].style.color="#ffffff";
    var aa=subnav.getElementsByTagName("a");
    aa[2].style.background="#990000";
    aa[2].style.color="#ffffff";
    }else if(url=="http://www.91yicheng.com/a/kechengshezhi/20130921/9.html"||url=="http://www.91yicheng.cn/a/kechengshezhi/20130921/9.html"){
    present3.style.background="#666666";
    var aa=present3.getElementsByTagName("a");
    aa[0].style.color="#ffffff";
    var aa=subnav.getElementsByTagName("a");
    aa[1].style.background="#990000";
    aa[1].style.color="#ffffff";
    }else if(url=="http://www.91yicheng.com/a/kechengshezhi/20130921/10.html"||url=="http://www.91yicheng.cn/a/kechengshezhi/20130921/10.html"){
    present3.style.background="#666666";
    var aa=present3.getElementsByTagName("a");
    aa[0].style.color="#ffffff";
    var aa=subnav.getElementsByTagName("a");
    aa[2].style.background="#990000";
    aa[2].style.color="#ffffff";
    }else if(url=="http://www.91yicheng.com/a/kechengshezhi/20131021/36.html"||url=="http://www.91yicheng.cn/a/kechengshezhi/20131021/36.html"){
    var aa=subnav.getElementsByTagName("a");
    aa[3].style.background="#990000";
    aa[3].style.color="#ffffff";
    }
    </script>

    效果如下:

    点击栏目后变色-完美源码

    效果下载:点击栏目后变色

    此效果转自本公司完成的项目:http://www.91yicheng.cn/

     

    END
    如本资源侵犯了您的权益,请联系投诉邮箱admin@wmphp.com进行举报!我们将在收到邮件的1个小时内处理完毕。 本站仅为平台,发布的资源均为用户投稿或转载!所有资源仅供参考学习使用,请在下载后的24小时内删除,禁止商用! Wmphp.com(完美源码)助力正版,如您有自己的原创产品,可以联系客服投稿,代理出售! Wmphp.com(完美源码)客服QQ:136882447 Wmphp.com(完美源码)商务电话(仅对企业客户/个人用户):15120086569 (微信同步) 请注意:本站不提供任何免费的技术咨询服务,为了节约时间,下载前 请确认自己会技术
    完美源码 » 点击栏目后变色
    3488+

    本站勉强运行

    3665+

    用户总数

    690+

    资源总数

    0+

    今日更新

    2024-4-8

    最后更新时间