• 来自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

  • 相关阅读:
    vuex2 mapActions 报错 `unknown action type: xxxx`
    IE报vuex requires a Promise polyfill in this browser问题解决
    vue路由懒加载
    vue-router各个属性的作用及用法
    JS实现继承的几种方法
    ES6学习笔记--promise对象
    jQuery--data()方法
    原生js实现二级联动下拉列表菜单
    sql server中部分函数功能详解
    js中字符串转换为数值的两种方法的区别
  • 原文地址:https://www.cnblogs.com/webdm/p/2070506.html
Copyright © 2020-2023  润新知