This article will introduce in detail the display and hiding of the element-based index matching control layer of jquery. You can use hide (), show (), then we can use each traversal to control display hiding.
The structure of a topic is special during work. The Code is as follows:
| The Code is as follows: |
Copy code |
<Div class = "test">
<Ul class = "list">
<Li> 1 </li>
<Li> 2 </li>
<Li> 3 </li>
<Li> 4 </li>
<Li> 5 </li>
</Ul>
<Div class = "part">
<Div> 1-1 </div>
<Div style = "display: none;"> 2 </div>
<Div style = "display: none;"> 3 </div>
<Div style = "display: none;"> 4 </div>
<Div style = "display: none;"> 5 </div>
</Div>
</Div>
<Div class = "test">
<Ul class = "list">
<Li> 1 </li>
<Li> 2 </li>
<Li> 3 </li>
<Li> 4 </li>
<Li> 5 </li>
</Ul>
<Div class = "part">
<Div> 2-1 </div>
<Div style = "display: none;"> 2-2 </div>
<Div style = "display: none;"> 2-3 </div>
<Div style = "display: none;"> 2-4 </div>
<Div style = "display: none;"> 2-5 </div>
</Div>
</Div> |
You need to click the li label under each. list to control the display of the div layer of. part at the same level under this. list. At the same time, it cannot affect the display of other. list-related layers on the page!
At the beginning, I felt that there was no technical difficulty in dealing with this, but I encountered a small problem and recorded the implementation code.
| The Code is as follows: |
Copy code |
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Meta http-equiv = "X-UA-Compatible" content = "IE = edge, chrome = 1">
<Title> Examples </title>
<Meta name = "description" content = "">
<Meta name = "keywords" content = "">
<Link href = "" rel = "stylesheet">
<Style>
* {Margin: 0; padding: 0 ;}
. Test {padding: 20px ;}
. Test ul {overflow: hidden ;}
. Test ul li {width: 50px; height: 30px; margin-right: 10px; border-bottom: 1px red solid; float: left; cursor: pointer ;}
</Style>
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"> </script>
</Head>
<Body>
<Div class = "test">
<Ul class = "list">
<Li> 1 </li>
<Li> 2 </li>
<Li> 3 </li>
<Li> 4 </li>
<Li> 5 </li>
</Ul>
<Div class = "part">
<Div> 1-1 </div>
<Div style = "display: none;"> 2 </div>
<Div style = "display: none;"> 3 </div>
<Div style = "display: none;"> 4 </div>
<Div style = "display: none;"> 5 </div>
</Div>
</Div>
<Div class = "test">
<Ul class = "list">
<Li> 1 </li>
<Li> 2 </li>
<Li> 3 </li>
<Li> 4 </li>
<Li> 5 </li>
</Ul>
<Div class = "part">
<Div> 2-1 </div>
<Div style = "display: none;"> 2-2 </div>
<Div style = "display: none;"> 2-3 </div>
<Div style = "display: none;"> 2-4 </div>
<Div style = "display: none;"> 2-5 </div>
</Div>
</Div>
<Script>
Var index,
Parent;
$ (". List> li "). each (function (I, el) {/* multiple. the li indexes under the list are accumulated, that is, the I value is: 0 <= I <= 9 */
$ (This). click (function (event ){
Parent = $ (this). parents (". test ");
Index = $ (". list> li ", parent ). index ($ (this); // obtain the corresponding parent element of the click item. test. the index in the part instead of the I value in the each ().
// Console. log (index );
Parent. children ('. part'). find ('div'). eq (index). show (). siblings (). hide ();
});
});
</Script>
</Body>
</Html>
|
