当前访客身份:游客 [ 登录  | 注册加入尚学堂]
启用新域名sxt.cn
新闻资讯

JavaScript效果之选项卡

helloworld 发表于 2年前  | 评论(0 )| 阅读次数(661 )|   0 人收藏此文章,   我要收藏

拼了命学习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>



 

分享到:0
关注微信,跟着我们扩展技术视野。每天推送IT新技术文章,每周聚焦一门新技术。微信二维码如下:
微信公众账号:尚学堂(微信号:bjsxt-java)
声明:博客文章版权属于原创作者,受法律保护。如果侵犯了您的权利,请联系管理员,我们将及时删除!
(邮箱:webmaster#sxt.cn(#换为@))
北京总部地址:北京市海淀区西三旗桥东建材城西路85号神州科技园B座三层尚学堂 咨询电话:400-009-1906 010-56233821
Copyright 2007-2015 北京尚学堂科技有限公司 京ICP备13018289号-1 京公网安备11010802015183