tab特效附代码:

学习了Tab特效,总结一下:以下是自己写的代码:

html5:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tab选项卡</title>
 <link href="tab.css" rel="stylesheet" type="text/css">
    <script src="tab.js" type="text/javascript"></script>
</head>
<body>
<div id="tanContainer">
    <div id="tabNav">
        <ul>
            <li οnclick="tab('tab_1')" class="on">标题一</li>/*改为οnclick="tab('1')"*/
            <li οnclick="tab('tab_2')" class="on1">标题二</li>/*改为οnclick="tab('2')"*/
            <li οnclick="tab('tab_3')" class="on2">标题三</li>/*改为οnclick="tab('3')"*/
            <li οnclick="tab('tab_4')"class="on3">标题四</li>/*改为οnclick="tab('4')"*/
        </ul>
    </div>
    <div id="tab">
        <div id="tab_1" class="select">内容一</div>
        <div id="tab_2"  class="select1">内容二</div>
        <div id="tab_3"  class="select2">内容三</div>
        <div id="tab_4"  class="select3">内容四</div>
    </div>
</div>
</body>
</html>

javascript:

/*第一种方法,点击标题对应的内容显示,非点击标题对应的内容隐藏。*/

function tab(pid){
    var tabs=["tab_1","tab_2","tab_3","tab_4"];
    for(var i=0;i<4;i++){
        if(tabs[i]==pid){
            document.getElementById(tabs[i]).style.display="block";
        }else{
            document.getElementById(tabs[i]).style.display="none";
        }
    }
}
/*另一中方法:先设置内容隐藏,点击标题对应的内容显示
function  tab(pid){
    for( var i=0;i<4;i++){
        document.getElementById("tab_"+i).style.display="none";
    }
  document.getElementById("tab_"+pid).style.display="block";
}*/

css:

*{padding: 0;margin: 0;}
#tabNav{overflow: hidden;padding: 0;margin: 0;cursor: hand;}
#tabNav li{float: left;list-style: none;display: block;width: 100px;height: 30px;line-height: 30px;text-align: center;border: 1px solid #bbb;border-bottom: none;}
#tabNav .on{background-color: darkred;}
#tabNav .on1{background-color:blueviolet;}
#tabNav .on2{background-color:olivedrab;}
#tabNav .on3{background-color:  cadetblue;}
#tab  {display: block;width: 650px;height: 300px;line-height: 40px;color: black;border: 1px solid #c3c3c3;}
#tab  .select{display: block;width: 650px;height: 300px;line-height: 40px;background-color: darkred;}
#tab  .select1{display: none;width: 650px;height: 300px;line-height: 40px;background-color:blueviolet;}
#tab  .select2{display: none;width: 650px;height: 300px;line-height: 40px;background-color:olivedrab;}
#tab  .select3{display: none;width: 650px;height: 300px;line-height: 40px;background-color:  cadetblue;}
#tab div{display: block;}

结果:


展开阅读全文

没有更多推荐了,返回首页