• 采用CSS+JS实现简洁的滑动导航栏_网页代码站(www.webdm.cn)


    1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2  <html xmlns="http://www.w3.org/1999/xhtml">
    3 <head>
    4 <title>采用CSS+JS实现简洁的滑动导航栏_网页代码站(www.webdm.cn)</title>
    5 <style type="text/css">
    6 *{
    7 margin:0;
    8 padding:0;
    9 font-size:12px;
    10 }
    11 body{
    12 margin:5px;
    13 }
    14 .Tab{
    15 300px;
    16 }
    17 .TabBar{
    18 300px;
    19 list-style-type:none;
    20 }
    21 .TabBarNormal{
    22 float:left;
    23 60px;
    24 border:1px solid #0066CC;
    25 border-bottom:0px solid #fff;
    26 line-height:24px;
    27 text-align:center;
    28 margin:0 3px;
    29 }
    30 .TabBarActive{
    31 float:left;
    32 60px;
    33 border:1px solid #0066CC;
    34 border-bottom:0px solid #fff;
    35 background-color:#EEEEEE;
    36 line-height:25px;
    37 text-align:center;
    38 margin:0 3px;
    39 color:red
    40 }
    41 .TabContent{
    42 100%;
    43 height:200px;
    44 border:1px solid #0066CC;
    45 padding:5px;
    46 position:absolute;
    47 margin-top:-1px;
    48 }
    49 </style>
    50 </head>
    51 <body>
    52 <div class="Tab">
    53 <ul class="TabBar">
    54 <li id="tab1" class="TabBarActive" onmouseover="showTab(1);">ASP</li>
    55 <li id="tab2" class="TabBarNormal" onmouseover="showTab(2);">PHP</li>
    56 <li id="tab3" class="TabBarNormal" onmouseover="showTab(3);">AJAX</li>
    57 </ul>
    58 <div class="TabContent" id="tabContent1">ASP源代码</div>
    59 <div class="TabContent" id="tabContent2" >PHP精品源代码</div>
    60 <div class="TabContent" id="tabContent3" >Ajax资源脚本</div>
    61 </div>
    62 <script type="text/javascript">
    63 var activeTab =1;
    64 var activeTabContent = 1;
    65 var i;
    66 for (i=2;i<=3;i++) {
    67 document.getElementById("tabContent"+i).style.display="none";
    68 }
    69 function showTabContent(n) {
    70 document.getElementById("tabContent"+activeTabContent).style.display="none";
    71 document.getElementById("tabContent"+n).style.display="";
    72 activeTabContent=n;
    73 }
    74 function showTab(n) {
    75 document.getElementById("tab"+activeTab).className="TabBarNormal";
    76 document.getElementById("tab"+n).className="TabBarActive";
    77 activeTab=n;
    78 showTabContent(n);
    79 }
    80 </script>
    81 </body>
    82 </html>
    83 <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!

    文章来自:http://www.webdm.cn/webcode/568e34f2-2a01-4999-bc94-e61367d29571.html

  • 相关阅读:
    【Ts踩坑】关于子类继承Error/Array/Map等造成无法访问子类中声明的方法问题
    【React Hooks】memo和useCallback搭配所带来的性能优化
    【Ts重构Axios】url处理篇
    【CSS style】超出指定行文字后开始省略
    【TypeScript】基本数据类型小结
    【TypeScript】你需要了解的泛型
    【TypeScript】几种高级类型
    Python 下载图片的几种方法
    python with open as f 写韩文中文乱码
    烙印---臧克家
  • 原文地址:https://www.cnblogs.com/webdm/p/1905344.html
Copyright © 2020-2023  润新知