Home > Developer > Web Develop
Now almost all the page to tab or even more than one, there is an idea to try to use a piece of code to control all tab methods, try it yourself. There are several points to catch.
<style>
. wrap{
width:100%;
height:800px;
position:relative;
}
. wrap2{
width:100%;
height:800px;
position:relative;
}
. title{
width:200px;
height:50px;
Background-color: #ccc;
Display:inline-block;
}
. box{
width:600px;
height:300px;
border:1px solid red;
Display:none;
Position:absolute;
}
</style>
<body>
<div class= "Wrap" >
<p class= "title" >1</p>
<p class= "title" >2</p>
<p class= "title" >2</p>
<p style= "Clear:both" ></p>
<div class= "box" style= "Display:block" >a</div>
<div class= "box" >b</div>
<div class= "box" >c</div>
</div>
<div class= "WRAP2" >
<p class= "title" >1</p>
<p class= "title" >2</p>
<p class= "title" >2</p>
<p style= "Clear:both" ></p>
<div class= "box" style= "Display:block" >a</div>
<div class= "box" >b</div>
<div class= "box" >c</div>
</div> <script>
$ (function () {
$ ('. Title '). Click (function () {
var $this =$ (this);
var $pare = $this. Parent ();
Alert ($this)
Alert ($pare. Find (". Box"). EQ ($this));
$pare. Find (". Box"). EQ ($this. Index ()). Show (). Siblings (". Box"). Hide ();
})
})
</script>
Code ideas: 1, what do you have in common? structure, such as tab switch block and the following display block are the same structure, they show the block below the subscript is always the same as the subscript above. In other words, their this.index values can be passed directly from the toggle block above.
2, there is a problem is that they are the Department of code structure block, how can only use This.index to pass a subscript can be solved, or there will be a frequently occurring problem, is a switch, all tab will switch. But what is a different point? Is that their father is not the same, so this is the problem, we can use this click on the object to find the parent element, from the parent element to find the corresponding display block to solve, of course, but also to optimize, only the most simple code to achieve the basic effect for display only.
This article is from the "10975329" blog, please be sure to keep this source http://10985329.blog.51cto.com/10975329/1861010
A jquery code for multiple tab effects
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
