选项卡

页面里经常要用到选项卡，以往每次做了就做了，下次要用的时候又到以前做的那个页面里去copy，从未把这个放在心上。前段时间一朋友问我关于这个选项卡的布局及样式，一下子没有回答出来，于是，花了些时间重头做这个选项卡。

选项卡很简单，基本上没有什么太大的问题，只是在写样式的时候，有两个地方需要注意。

1、tab和con衔接的地方

2、选中的tab和未选中的tab紧挨着地左右边框

下面是html和css以及js

html:

<ul id="tab">
    <li class="selL" onclick="changeTab(0)">选项一</li>
    <li onclick="changeTab(1)">选项二</li>
    <li onclick="changeTab(2)">选项三</li>
    <li onclick="changeTab(3)">选项四</li>
</ul>
<div id="con">
    <div class="con">内容一</div>
    <div>内容二</div>
    <div>内容三</div>
    <div>内容四</div>
</div>

css:

 

ul,li,div{ margin:0px; padding:0px;}
ul{ padding-left:50px;}
ul li{ list-style:none; width:150px; float:left; margin-right:-1px; display:inline; top:1px; border:1px solid #ccc; border-bottom:0px; line-height:25px; text-align:center; position:relative;}
ul li.selL{ border:1px solid green;  border-bottom-color:#fff; z-index:1;}
#con div{ border-top:1px solid #ccc; display:none; }
#con div.con{ display:block; border-top-color:green; text-indent:4em; line-height:35px; clear:both;}

js:

function changeTab(n){
    var tab=document.getElementById('tab').childNodes;
    var con=document.getElementById('con').childNodes;
    for(var i=0;i<tab.length; i++){
        tab.item(i).className=null;
        con.item(i).className=null;
    }
    tab.item(n).className='selL';
    con.item(n).className='con';
}