zoukankan      html  css  js  c++  java
  • 来自126邮箱的经典TAB导航

    代码简介:非常经典,我觉得算是先驱之一了,以前常用126邮箱,经常看见。

    代码内容:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    		<title>来自126邮箱的经典TAB导航_网页代码站(www.webdm.cn)</title>
    <style type="text/css">
    <!--
    body,div,ul,li{
    padding:0;
    text-align:center;
    }
    body{
    font:12px "宋体";
    text-align:center;
    }
    a:link{
    color:#00F;
    text-decoration:none;
    }
    a:visited {
    color: #00F;
    text-decoration:none;
    }
    a:hover {
    color: #c00;
    text-decoration:underline;
    }
    ul{ list-style:none;}
    /*选项卡1*/
    #Tab1{
    460px;
    margin:0px;
    padding:0px;
    margin:0 auto;}
    /*选项卡2*/
    #Tab2{
    576px;
    margin:0px;
    padding:0px;
    margin:0 auto;}
    /*菜单class*/
    .Menubox {
    100%;
    background:url(http://www.webdm.cn/images/20100819/200801081251340.gif);
    height:28px;
    line-height:28px;
    }
    .Menubox ul{
    margin:0px;
    padding:0px;
    }
    .Menubox li{
    float:left;
    display:block;
    cursor:pointer;
    114px;
    text-align:center;
    color:#949694;
    font-weight:bold;
    }
    .Menubox li.hover{
    padding:0px;
    background:#fff;
    116px;
    border-left:1px solid #A8C29F;
    border-top:1px solid #A8C29F;
    border-right:1px solid #A8C29F;
    background:url(http://www.webdm.cn/images/20100819/200801081249070.gif);
    color:#739242;
    font-weight:bold;
    height:27px;
    line-height:27px;
    }
    .Contentbox{
    clear:both;
    margin-top:0px;
    border:1px solid #A8C29F;
    border-top:none;
    height:181px;
    text-align:center;
    padding-top:8px;
    }
    -->
    </style>
    <script>
    <!--
    /*第一种形式 第二种形式 更换显示样式*/
    function setTab(name,cursel,n){
    for(i=1;i<=n;i++){
    var menu=document.getElementById(name+i);
    var con=document.getElementById("con_"+name+"_"+i);
    menu.className=i==cursel?"hover":"";
    con.style.display=i==cursel?"block":"none";
    }
    }
    //-->
    </script>
    
    	</head>
    <body>
    <div id="Tab1">
    <div class="Menubox">
    <ul>
    <li id="one1" onclick="setTab('one',1,4)"  class="hover">新闻1</li>
    <li id="one2" onclick="setTab('one',2,4)" >新闻2</li>
    <li id="one3" onclick="setTab('one',3,4)">新闻3</li>
    <li id="one4" onclick="setTab('one',4,4)">新闻4</li>
    </ul>
    </div>
    <div class="Contentbox">
    <div id="con_one_1" class="hover">新闻列表1</div>
    <div id="con_one_2" style="display:none">新闻列表2</div>
    <div id="con_one_3" style="display:none">新闻列表3</div>
    <div id="con_one_4" style="display:none">新闻列表4</div>
    </div>
    </div>
    <br>
    <div id="Tab2">
    <div class="Menubox">
    <ul>
    <li id="two1" onclick="setTab('two',1,4)"  class="hover">新闻1</li>
    <li id="two2" onclick="setTab('two',2,4)" >新闻2</li>
    <li id="two3" onclick="setTab('two',3,4)">新闻3</li>
    <li id="two4" onclick="setTab('two',4,4)">新闻4</li>
    </ul>
    </div>
    <div class="Contentbox">
    <div id="con_two_1" >新闻列表1</div>
    <div id="con_two_2" style="display:none">新闻列表2</div>
    <div id="con_two_3" style="display:none">新闻列表3</div>
    <div id="con_two_4" style="display:none">新闻列表4</div>
    </div>
    </div>
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/48b7aeca-d502-4137-9986-47cac1a3e667.html

  • 相关阅读:
    python 包管理工具 pip 的配置
    Python 变量作用域 LEGB (下)—— Enclosing function locals
    Python 变量作用域 LEGB (上)—— Local,Global,Builtin
    2020 Java 面试题 小结 (答案慢慢补上,有错误请指出)
    mysql 根据日期(date)做年,月,日分组统计查询
    jvm指令
    正则表达式 分割地址 获取省市区详细地址
    .Net 异常记录
    WCF设计服务协议(一)
    plsql ORA-01789:查询块具有不正确的结果列数
  • 原文地址:https://www.cnblogs.com/webdm/p/2070506.html
Copyright © 2011-2022 走看看