首页 > 代码库 > JavaScript效果之选项卡

JavaScript效果之选项卡

2024-07-17 02:15:40   230人阅读

原文:JavaScript效果之选项卡

拼了命学习js，想把学到的Javascript效果，可以记在博客里，在记录过程中，加深理解。

gogogo，第一个效果，选项卡。

一、选项卡效果的实现思路

选项卡效果的应用很广泛，几乎所有的网站都会用到选项卡，现在就来写选项卡。

选项卡的实现思路：

 两个div，一个用来放在选项卡，一个用来放置每个选项卡内容。

首先，先把放置内容的div隐藏起来display:none，只保留一个显示display：block。

然后，通过点击选项卡，在该添加类的位置上添上属性类。

二、实现

我写的这个选项卡界面特“简洁”，只有说明选项卡该如何写。start~~~

截图：

function setTab(name,carsel,n)            //name为名字，carsel为游标，n为tab的数量{    for(var i =1;i<=n;i++)    {        var oMenu = document.getElementById(‘one‘+i);        var oContent = document.getElementById(‘con_‘+name+i);        oMenu.className = i == carsel?"hover":"";        oContent.style.display = i ==carsel?"block":"none";    }}

 

<div id="tab_menu">            <ul>                <li id="one1" onclick="setTab(‘one‘,1,3)">女装</li>                <li id="one2" onclick="setTab(‘one‘,2,3)">男装</li>                <li id="one3" onclick="setTab(‘one‘,3,3)">童装</li>            </ul>        </div>        <div id="tab_content">            <div id="con_one1">女装女装女装女装女装</div>            <div id="con_one2" style="display:none">男装男装男装男装男装</div>            <div id="con_one3" style="display:none">童装童装童装童装童装</div>        </div>

 

上面的Javascript函数，通过一个for循环，来判断用户点击的是哪一个选项卡，然后便获取该选项卡元素。这里的处理是：document.getElementById(‘one‘+i); 

获取到的会是id = one1/one2/on3，然后判断，i == carsel?"hover":"";   此时循环的 i   是否会等于游标值，会的话就添加一个hover类上去，改变被点击项的样式。

同样，下面的语句：oContent.style.display = i ==carsel?"block":"none";给当前被点击的选项，设置display为block，即显示出来。

三、完整代码

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title></title><link href="" rel="stylesheet"><style type="text/css">.tab{    width: 600px;    height: 400px;    background: #CCC;    margin: 0 auto;}#tab_menu{    width: 200px;    height: 400px;    float: left;    background: #efefef;}#tab_content{    width: 400px;    height: 400px;    float: left;}#con_one1{    background: yellow;    width: 400px;    height: 400px;}#con_one2{    background: green;    width: 400px;    height: 400px;}#con_one3{    background: blue;    width: 400px;    height: 400px;}.hover{    background: yellow;}</style><script type="text/javascript">function setTab(name,carsel,n)            //carsel为游标，n为tab的数量{    for(var i =1;i<=n;i++)    {        var oMenu = document.getElementById(‘one‘+i);        var oContent = document.getElementById(‘con_‘+name+i);        oMenu.className = i == carsel?"hover":"";        oContent.style.display = i ==carsel?"block":"none";    }}</script></head><body>    <div class="tab">        <div id="tab_menu">            <ul>                <li id="one1" onclick="setTab(‘one‘,1,3)">女装</li>                <li id="one2" onclick="setTab(‘one‘,2,3)">男装</li>                <li id="one3" onclick="setTab(‘one‘,3,3)">童装</li>            </ul>        </div>        <div id="tab_content">            <div id="con_one1">女装女装女装女装女装</div>            <div id="con_one2" style="display:none">男装男装男装男装男装</div>            <div id="con_one3" style="display:none">童装童装童装童装童装</div>        </div>    </div></body></html>
View Code

 四、

补充：

用一个参数来实现

 

/*------------------一个参数实现--------------------*/function setTab(n){    var aLi = document.getElementsByTagName(‘li‘);    var oContent = document.getElementById(‘tab_content‘);    var aDiv = oContent.getElementsByTagName(‘div‘);    var i =0;    for(i = 0;i<aLi.length; i++)    {        if(n == i)        {            aLi[i].className = "hover";            aDiv[i].style.display = "block";        }        else        {            aLi[i].className = "";                aDiv[i].style.display = "none";        }    }}

<div id="tab_menu">
            <ul>
                <!--<li id="one1" onclick="setTab(‘one‘,1,3)">女装</li>
                <li id="one2" onclick="setTab(‘one‘,2,3)">男装</li>
                <li id="one3" onclick="setTab(‘one‘,3,3)">童装</li>-->
                <li id="one1" onclick="setTab(0)" class="hover">女装</li>
                <li id="one2" onclick="setTab(1)">男装</li>
                <li id="one3" onclick="setTab(2)">童装</li>
                
            </ul>
        </div>

 


联系
我们