A jquery code for multiple tab effects

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.