网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 点击标签切换和自动切换DIV选项卡
内容
    代码如下:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>点击切换和自动切换选项卡</title>
    <style type="text/css">
    *{list-style:none;margin:0;padding:0;overflow:hidden}
    .tab1{width:401px;border-top:#A8C29F solid 1px;border-bottom:#A8C29F solid 1px;margin:50px 200px;}
    .menu{width:400px;background:#eee;height:28px;border-right:#A8C29F solid 1px;border-bottom:#A8C29F solid 1px;}
    li{float:left;width:99px;text-align:center;line-height:28px;height:28px;cursor:pointer;border-left:#A8C29F solid 1px;color:#666;font-size:14px;overflow:hidden}
    .menudiv{width:399px;height:300px;border-left:#A8C29F solid 1px;border-right:#A8C29F solid 1px;border-top:0;background:#fefefe}
    .menudiv div{padding:15px;line-height:28px;}
    .off{background:#E0E2EB;color:#336699;font-weight:bold}
    </style>
    <script type="text/javascript">
    function setTab(name,cursel){
    cursel_0=cursel;
    for(var i=1; i<=links_len; i++){
    var menu = document.getElementById(name+i);
    var menudiv = document.getElementById("con_"+name+"_"+i);
    if(i==cursel){
    menu.className="off";
    menudiv.style.display="block";
    }
    else{
    menu.className="";
    menudiv.style.display="none";
    }
    }
    }
    function Next(){
    cursel_0++;
    if (cursel_0>links_len)cursel_0=1
    setTab(name_0,cursel_0);
    }
    var name_0='one';
    var cursel_0=1;
    var links_len,iIntervalId;
    onload=function(){
    var links = document.getElementById("tab1").getElementsByTagName('li')
    links_len=links.length;
    for(var i=0; i<links_len; i++){
    links[i].onmouseover=function(){
    clearInterval(iIntervalId);
    }
    }
    document.getElementById("con_"+name_0+"_"+links_len).parentNode.onmouseover=function(){
    clearInterval(iIntervalId);
    }
    setTab(name_0,cursel_0);
    }
    </script>
    </head>
    <body>
    <h3> </h3>
    <div id="tab1">
    <div>
    <ul>
    <li id="one1" onclick="setTab('one',1)">标签1</li>
    <li id="one2" onclick="setTab('one',2)">标签2</li>
    <li id="one3" onclick="setTab('one',3)">标签3</li>
    <li id="one4" onclick="setTab('one',4)">标签4</li>
    </ul>
    </div>
    <div>
    <div id="con_one_1"><h4>标签1-内容</h4></div>
    <div id="con_one_2"><h4>标签2-内容</h4></div>
    <div id="con_one_3"><h4>标签3-内容</h4></div>
    <div id="con_one_4"><h4>标签4-内容</h4></div>
    </div>
    </div>
    </body>
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/22 11:40:26