zoukankan      html  css  js  c++  java
  • javascript网站导航栏

    练手的结果,留个痕迹。

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title>无标题页</title>
    <style type="text/css">
    a:link {
     text-decoration: none;
    }
    a:visited {
     text-decoration: none;
    }
    .menu {
     800px;
     height:50px;
     text-align:center;
    }
    .menu ul {
     list-style-type:none;
     height:50px;
    }
    .menu ul li {
     float:left;
     15%;
     height:30px;
     background-color:#999;
     font-size:16px;
     font-weight:bolder;
    }
    .leftborder {
     border-left- 1px;
     border-left-style: solid;
     border-left-color: #6C9;
    }
    .rightboder {
     border-right- 1px;
     border-right-style: solid;
     border-right-color: #6C9;
    }
    .menuactive {
     color:#F00;
    }
    .menuunactive {
     color:#6C9;
    }
    </style>
    <script type="text/javascript">
    function UrlChangeMenu(){
     var url=window.location.href;
     var paras=url.split("?");
     if(paras.length>1){
         var values = paras[1].split("=");
         if(values.length>1){
       var menus = document.getElementsByName("menu");
       if(menus){
        for(var i=0;i<menus.length;i++) {
         menus[i].className="menuunactive"; 
        }
       }
     
             document.getElementById(values[1]).className="menuactive";
         }
     }
    }
    </script>
    </head>
    <body onload="UrlChangeMenu()">
    <div class="menu">
      <ul>
        <li> <a href="daohanglan.htm?id=menu1" class="menuactive" name="menu" id="menu1" > ASP.NET</a></li>
        <li class="leftborder"> <a href="daohanglan.htm?id=menu2" class="menuunactive" name="menu" id="menu2" > JAVASCRIPT</a></li>
        <li class="leftborder"> <a href="daohanglan.htm?id=menu3" class="menuunactive" name="menu" id="menu3" > CSS</a></li>
        <li class="leftborder"> <a href="daohanglan.htm?id=menu4" class="menuunactive" name="menu" id="menu4" > HTML</a></li>
      </ul>
    </div>
    </body>
    </html>

  • 相关阅读:
    Python学习第151天(Django之多对多)
    Python学习第150天(目前正在做的内容介绍)
    挑战日语学习100天:Day11
    挑战日语学习100天:Day10
    hdu3853 LOOPS 期望dp
    最长公共子串
    基于后缀数组的字符串匹配
    高度数组模板
    Jenkins持续集成自动化测试
    自动化上传文件
  • 原文地址:https://www.cnblogs.com/mimengjiangnan/p/1860498.html
Copyright © 2011-2022 走看看