原生 Javascript实现的仿windows选项卡.简单实用.

CSS代码

#outer { width:622px;

height:280px;

border:0px solid #e2e2e2;

margin:auto;

margin-top:20px;

}

#outer .act{

background-color: #0CC;

color:white;

border-bottom:0px;

}

#outer div {clear:both;

width:621px;

height:251px;

border-top:1px solid #0cc;

background-color:#e2e2e2;

margin-left:0px;

display:none;

overflow:hidden;

}

#outer ul { list-style:none;margin:0;padding:0;}

#outer ul li{

padding:8px 35px 5px 35px;

font-size:13px;

float:left;

}

#outer ul li:Hover{

cursor:pointer;

color:white;

background-color:#0cc;

}

2.HTML代码

<div id="outer">

<ul >

<li class="act" > 简 介 </li>

<li> 优 势 </li>

<li > 留 言 </li>

</ul>

<div style="display:block;">1</div>

<div>2</div>

<div>3</div>

</div

3.JS代码

function tabs(){

var outer = document.getElementById("outer");

var li = outer.getElementsByTagName("li");

var divs = outer.getElementsByTagName("div");

for(var i=(li.length-1);i>=0;i--){

li[i].index = i;

li[i].onclick = function (){

for(var d=(li.length-1);d>=0;d--){

divs[d].style.display="none";

li[d].className='';

}

this.className="act";

divs[this.index].style.display="block";

};

}

}