• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > JS、jQ >  兼容IE6的js+css简单实正文

兼容IE6的js+css简单实用经典选项卡特效详细教程

作者:我爱模版网
类型:图文教程
点击次数:
发布时间:2014-01-18 17:13
分享到:

先运行下面的代码查看效果:



提示:您可以先修改部分代码再运行


下面来说说如何实现这种选项卡特效:

1、编写html代码,我们用了两个<ul>标签来嵌套,第一个ul里面是tab选项卡的标题,第二个是显示的内容,每个ul里面有三个li,每个li都给一个递增的ID。具体为什么这么做,往下看即可明白。如下:


01<ul id="menu">
02    <li id="menu0" onmouseover="secBoard(0)" class="sec2">查涤纶 25t</li>
03    <li id="menu1" onmouseover="secBoard(1)" class="sec1">T110E5</li>
04    <li id="menu2" onmouseover="secBoard(2)" class="sec1">M48A1</li>
05</ul>
06<ul id="main" class="clearfloat">
07    <li id="main0" class="block">
09    </li>
10    <li id="main1" class="unblock">
12    </li>
13    <li id="main2" class="unblock">
15    </li>
16</ul>


2、编写css样式。第一个ul的li都左浮动。为了不对第二个造成影响,我们清楚了浮动“ class='clearfloat'”。第二个ul的第一个li显示,第二个li和第三个li都隐藏。并且对第一个ul里面的li定义了正常状态下的css样式,即“sec1”和选中状态下的样式,即“sec2”


01<style type="text/css">
02    ul,li{margin:0; padding:0;}
03    .clearfloat{clear:both; height:0 !important;}
04    #menu {margin: 0px; padding: 0px; list-style: none;}
05    #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;}
06    /*未选中*/
07    .sec1{background-color:#360D4E; height:19px;font-size:14px; color:#FFFFFF; border-bottom:none;}
08    /*选中*/
09    .sec2{background-color:#DEB447height:17px; border:#fff 1px solid; color:#fff; border-bottom:#fff 2px solid; border-top:none; font-weight:bold; font-size:14px;}
10    .block { display: block; margin-top:10px; }
11    .unblock { display: none;margin-top:10px; }
12    #main{ list-style:none; margin:20px 0 0 0; width:600px; padding-top:10px;}
13    #main li{width:600px; border:none;}
14</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。代码如下:


01<script language="javascript">
02function secBoard(n){
03    for(i=0;i<3;i++){
04        window.document.getElementById("menu"+i).className="sec1";
05        window.document.getElementById("menu"+n).className="sec2";
06    }
07    for(i=0;i<3;i++){
08        window.document.getElementById("main"+i).style.display="none";
09        window.document.getElementById("main"+n).style.display="block";
10    }
11}
12</script>


(责任编辑:网页模板)
  • 本文标签:
  • js tab选项卡,js选项卡教程,css选项卡教程
js打开网址函数windows.new()详解
jquery为a链接做跳转文字提示