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

请输入您要查询的范文：

　

标题 点击标签切换和自动切换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/24 22:14:16