兼容IE6的js+css简单实用经典选项卡特效详细教程
- 作者：我爱模版网
- 类型：图文教程
- 点击次数：
- 发布时间：2014-01-18 17:13
先运行下面的代码查看效果：
提示：您可以先修改部分代码再运行
下面来说说如何实现这种选项卡特效：
1、编写html代码，我们用了两个<ul>标签来嵌套，第一个ul里面是tab选项卡的标题，第二个是显示的内容，每个ul里面有三个li，每个li都给一个递增的ID。具体为什么这么做，往下看即可明白。如下：
<ul id="menu">
<li id="menu0" onmouseover="secBoard(0)" class="sec2">查涤纶 25t</li>
<li id="menu1" onmouseover="secBoard(1)" class="sec1">T110E5</li>
<li id="menu2" onmouseover="secBoard(2)" class="sec1">M48A1</li>
</ul>
<ul id="main" class="clearfloat">
<li id="main0" class="block">
<img src="http://www.5imoban.net/images/demo/images/tab1.jpg" />
</li>
<li id="main1" class="unblock">
<img src="http://www.5imoban.net/images/demo/images/tab2.jpg" />
</li>
<li id="main2" class="unblock">
<img src="http://www.5imoban.net/images/demo/images/tab3.jpg" />
</li>
</ul>
2、编写css样式。第一个ul的li都左浮动。为了不对第二个造成影响，我们清楚了浮动“ class='clearfloat'”。第二个ul的第一个li显示，第二个li和第三个li都隐藏。并且对第一个ul里面的li定义了正常状态下的css样式，即“sec1”和选中状态下的样式，即“sec2”
<style type="text/css">
ul,li{margin:0; padding:0;}
.clearfloat{clear:both; height:0 !important;}
#menu {margin: 0px; padding: 0px; list-style: none;}
#menu li{list-style:none; display: block; width: 200px; text-align: center; float: left; margin: 0px; padding-top: 2px; padding-right: 0px;padding-bottom: 6px; padding-left: 0px; cursor:pointer; padding-top:6px;}
/*未选中*/
.sec1{background-color:#360D4E; height:19px;font-size:14px; color:#FFFFFF; border-bottom:none;}
/*选中*/
.sec2{background-color:#DEB447; height:17px; border:#fff 1px solid; color:#fff; border-bottom:#fff 2px solid; border-top:none; font-weight:bold; font-size:14px;}
.block { display: block; margin-top:10px; }
.unblock { display: none;margin-top:10px; }
#main{ list-style:none; margin:20px 0 0 0; width:600px; padding-top:10px;}
#main li{width:600px; border:none;}
</style>
3、编写js代码，定义了一个名称为“secBoard”的函数，参数为第一个ul里面li的索引值，并且在html代码里每个li都给一个属性“onmouseover='secBoard(索引)'”，当鼠标移上去执行函数。通过写两个循环函数，循环出li的index，即索引值，通过window.document.getElementById("menu"+i).className="sec1"给未选中的li加样式，通过window.document.getElementById("menu"+n).className="sec2"给选中的li加样式。同理，第二个循环控制第二个ul里面的li的显示隐藏：window.document.getElementById("main"+i).style.display="none"隐藏li，window.document.getElementById("main"+n).style.display="block"显示当前的li。代码如下：
<script language="javascript">
function secBoard(n){
for(i=0;i<3;i++){
window.document.getElementById("menu"+i).className="sec1";
window.document.getElementById("menu"+n).className="sec2";
}
for(i=0;i<3;i++){
window.document.getElementById("main"+i).style.display="none";
window.document.getElementById("main"+n).style.display="block";
}
}
</script>
- 本文标签：
- js tab选项卡,js选项卡教程,css选项卡教程
