点击标签切换DIV

来源：互联网发布：淘宝网怎么绑定支付宝编辑：程序博客网时间：2024/05/16 19:20

<!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 class="tab1" id="tab1">        <div class="menu">            <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 class="menudiv">            <div id="con_one_1"><h4 style="color:red">标签1-内容</h4></div>            <div id="con_one_2" style="display:none;"><h4 style="color:red">标签2-内容</h4></div>            <div id="con_one_3" style="display:none;"><h4 style="color:red">标签3-内容</h4></div>            <div id="con_one_4" style="display:none;"><h4 style="color:red">标签4-内容</h4></div>        </div>    </div></body>

方法2：

<!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><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title>点击切换div的显示|选项卡</title><style type="text/css">body{    font-size:14px;    font-family:"Trebuchet MS";    color:#333;    }a {   bblr:expression_r(this.onFocus=this.blur());   outline:none;}ul{    margin:0;    padding:0;    list-style:none;    }ul li{    float:left;       }ul li a{    display:block;    width:100px;    height:25px;    line-height:25px;    text-align:center;    font-size:12px;    color:#369;    text-decoration:none;    }ul li a.sel{    position:relative;    top:1px;    margin-top:-1px;    width:98px;    background:#fff;    height:25px;    line-height:24px;    border:1px solid #ccc;    border-bottom:none;    }ul li a.sel:hover{    color:#f60;    }ul li a:hover{    color:#f60;    }   div{    float:left;    clear:left;    width:500px;    border:1px solid #ccc;    padding:10px;    display:none;    }div.on{    width:500px;    border:1px solid #ccc;    padding:10px;    display:block;    }   </style><script type="text/javascript">function sela(link){    var ul = document.getElementsByTagName("ul")[0];    var alllinks = ul.getElementsByTagName("a");    for (var i=0; i<alllinks.length; i++){        alllinks[i].className = "";    }/*前面的意思是把所有的ul中的a标签都className置空(最初始MSN群的className是sel),然后再赋予所点击的a标签的className为sel.由于在CSS中总是定义了.sel,所以被新命名的className为sel的标签就拥有了那个属性,所以会有标签被选择的感觉.*/link.className = "sel";    var alldivs = document.getElementsByTagName("div");    for (var k=0; k<alldivs.length; k++){        alldivs[k].className = "";    }    var divId = link.getAttribute("href").split("#")[1];//在此处得到a标签中的href中的内容。    divId = document.getElementById(divId);    divId.className = "on";//这样才能让css的作用得以显示，因为前面把所有的div标签都置空了。}</script></head><body><ul>    <li><a onclick="sela(this);return false;" href="#ibot" class="sel">GlartChen</a></li>    <li><a onclick="sela(this);return false;" href="#mgroup">青野月音</a></li>    <li><a onclick="sela(this);return false;" href="#msnmate">龙本水生</a></li></ul><div id="ibot"><p>GlartChen from Jiang Xi</p></div><div id="mgroup" class="on"><p>青野月音love赤夜萌香</p></div><div id="msnmate"><p>龙本水生爱看动漫</p></div></body></html>

0 0