多少个tab切换效果,JQ同胞遍历

2019-09-04 23:23 来源:未知

事例效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tab选项卡</title>
<style type="text/css">
*{ margin:0 ; padding:0;}
li { list-style-type:none;}
.tab { margin-bottom:30px;}
.tab .title li { cursor:pointer; height:30px; line-height:30px; background:#ccc; float:left; margin-right:5px; padding:0 10px;}
.tab .title li.on { background:#0C0; color:#000;}
.tab .icontent { display:none;}
.tab .content { border:1px solid #ccc; min-height:60px; clear:both;}
</style>
<script src=";
</head>

 

<body style="padding-left:100px;">
<p style="margin:30px 0 30px 0;">Tab选项卡</p>
<div class="tab">
<ul class="title">
<li class="on">选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
<div class="content">
<div class="icontent" style="display:block">
内容一
</div>
<div class="icontent">
内容二
</div>
<div class="icontent">
内容三
</div>
</div>
</div>

 

<div class="tab">
<ul class="title">
<li class="on">选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
<div class="content">
<div class="icontent" style="display:block">
内容1
</div>
<div class="icontent">
内容2
</div>
<div class="icontent">
内容3
</div>
</div>
</div>

 

<div class="tab" id="hover">
<ul class="title">
<li class="on">选项1</li>
<li>选项2</li>
<li>选项3</li>
</ul>
<div class="content">
<div class="icontent" style="display:block">
内容1
</div>
<div class="icontent">
内容2
</div>
<div class="icontent">
内容3
</div>
</div>
</div>

代码如下:

<script type="text/javascript">
function tab(nav,type){
var $nav = $(nav);
var $title = $(".title", $nav);

 

$title.find("li").bind(type,function(){
$this = $(this);
var index = $this.prevAll().length;  //通过往上同胞成分的个数来规定自个儿日前的目录。。。机智   ps:preAll()往上遍历全体同胞成分 prev往上遍历第多少个
$this.siblings("li").removeClass("on").end().addClass("on"); // ps:siblings 遍历全部的亲生成分
$this.parent().next(".content").find(".icontent").hide().eq(index).show(); // ps:next往下遍历第叁个同胞成分 
})
}
//
tab(".tab","click");
tab("#hover","mouseover")
</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";

<html xmlns=";

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文书档案</title>

<style type="text/css">

body,div,p,ul,li{padding:0;margin:0;}

#main{width:1005px;background:#ccc;overflow:hidden;zoom:1;}

ul li{float:left;list-style:none;}

#title li{width:200px;height:30px;line-height:30px;text-align:center;font-size:14px;font-weight:bold;background:#C00;border-right:1px solid #FF0;cursor:default}

#title .active{background:#9F0}

 

 

#content{padding-top:20px;}

#content p{padding-top:20px;}

.hide{display:none;}

</style>

<script type="text/javascript">

window.onload = function(){

var oTitle = document.getElementById("title").children;

var oContent = document.getElementById("content").children;

for(var i = 0;i<oTitle.length;i++){

oTitle[i].index = i;//扩充三个自定义属性

}

for(var i = 0;i<oTitle.length;i++){

oTitle[i].onmouseover = function(){

for(var i=0;i<oTitle.length;i++){

 

oTitle[i].className = "";

oContent[i].style.display = "none";//先去掉className,display变为n“none”

oTitle[this.index].className = "active";

oContent[this.index].style.display = "block";

}

}

}

}

 

</script>

</head>

 

 

<body>

<div id="main">

<div>

    <ul id="title">

     <li class="active">疯狂抢购</li>

     <li>猜您喜欢</li>

     <li>热卖商品</li>

     <li>热评商品</li>

     <li>新品上架</li>

    </ul>

    </div>

    <div id="content">

    <div class="hide" style="display:block">

            <p>疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购</p>

            <p>疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购</p>

            <p>疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购</p>

            <p>疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购疯狂抢购</p>

        </div>

        <div class="hide">

            <p>猜您喜欢猜您心爱猜您心爱猜您喜欢猜您疼爱猜您爱怜猜您喜欢猜您喜欢猜您心爱猜您喜欢</p>

            <p>猜您心爱猜您喜欢猜您心爱猜您喜爱猜您喜欢猜您喜欢猜您爱怜猜您喜欢猜您喜欢猜您喜爱</p>

            <p>猜您心爱猜您心爱猜您喜欢猜您喜欢猜您爱怜猜您心爱猜您喜欢猜您喜爱猜您爱怜猜您喜欢</p>

            <p>猜您喜欢猜您喜欢猜您疼爱猜您心爱猜您喜欢猜您喜爱猜您心爱猜您喜欢猜您喜欢猜您心爱</p>

        </div>

    <div class="hide">

            <p>热卖商品热卖商品热卖商品热卖商品热卖商品热卖商品热卖商品热卖商品热卖商品热卖商品</p>

            <p>热卖商品热卖商品热卖商品热卖商品热卖商品热卖商品热卖商品热卖商品热卖商品热卖商品</p>

            <p>热卖商品热卖商品热卖商品热卖商品热卖商品热卖商品热卖商品热卖商品热卖商品热卖商品</p>

            <p>热卖商品热卖商品热卖商品热卖商品热卖商品热卖商品热卖商品热卖商品热卖商品热卖商品</p>

        </div>

        <div class="hide">

            <p>热评商品热评商品热评商品热评商品热评商品热评商品热评商品热评商品热评商品热评商品</p>

            <p>热评商品热评商品热评商品热评商品热评商品热评商品热评商品热评商品热评商品热评商品</p>

            <p>热评商品热评商品热评商品热评商品热评商品热评商品热评商品热评商品热评商品热评商品</p>

            <p>热评商品热评商品热评商品热评商品热评商品热评商品热评商品热评商品热评商品热评商品</p>

        </div>www.2cto.com

        <div class="hide">

            <p>新品上架新品上架新品上架新品上架新品上架新品上架新品上架新品上架新品上架新品上架</p>

            <p>新品上架新品上架新品上架新品上架新品上架新品上架新品上架新品上架新品上架新品上架</p>

            <p>新品上架新品上架新品上架新品上架新品上架新品上架新品上架新品上架新品上架新品上架</p>

            <p>新品上架新品上架新品上架新品上架新品上架新品上架新品上架新品上架新品上架新品上架</p>

        </div>

        

    </div>

</div>

</body>

</html>

代码如下: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN html xmlns=...

TAG标签:
版权声明:本文由990888藏宝阁发布于前端代码,转载请注明出处:多少个tab切换效果,JQ同胞遍历