jQuery implements nested tab function
|
This article example shares the specific code of jQuery to implement the nested tab function for your reference. The specific content is as follows Summary of knowledge points:1.siblings(): sibling elements, get the siblings of each element in the matching set, filtering by selector is optional. 2.removeClass(): method removes one or more classes from the selected elements. 3.addClass(): method adds one or more classes to the selected elements. 4.eq(): The method reduces the set of matched elements to the one at the specified index. 5.hide() and show(): hide and show special effects. 6.parent(): Get the parent element of each element in the current set of matched elements. Using a selector for filtering is optional. 7.find(): The method obtains the descendants of each element in the current element set, filtering by selector, jQuery object or element. 8.index(): The method returns the index position of the specified element relative to other specified elements. 1.html
<body>
<div id="div1">
<input class="active" type="button" value="tab1" />
<input type="button" value="tab2" />
<input type="button" value="tab3" />
<input type="button" value="tab4" />
<input type="button" value="tab5" />
</div>
<div class="box1" style="display:block;">
<div class="box2" style="display:block;">
tab1-1
</div>
<div class="box2">
tab1-2
</div>
<div class="box2">
tab1-3
</div>
<input class="active" type="button" value="tab1-1" />
<input type="button" value="tab1-2" />
<input type="button" value="tab1-3" />
</div>
<div class="box1">
<div class="box2" style="display:block;">
tab2-1
</div>
<div class="box2">
tab2-2
</div>
<div class="box2">
tab2-3
</div>
<input class="active" type="button" value="tab2-1" />
<input type="button" value="tab2-2" />
<input type="button" value="tab2-3" />
</div>
<div class="box1">
<div class="box2" style="display:block;">
tab3-1
</div>
<div class="box2">
tab3-2
</div>
<div class="box2">
tab3-3
</div>
<input class="active" type="button" value="tab3-1" />
<input type="button" value="tab3-2" />
<input type="button" value="tab3-3" />
</div>
<div class="box1">
<div class="box2" style="display:block;">
tab4-1
</div>
<div class="box2">
tab4-2
</div>
<div class="box2">
tab4-3
</div>
<input class="active" type="button" value="tab4-1" />
<input type="button" value="tab4-2" />
<input type="button" value="tab4-3" />
</div>
<div class="box1">
<div class="box2" style="display:block;">
tab5-1
</div>
<div class="box2">
tab5-2
</div>
<div class="box2">
tab5-3
</div>
<input class="active" type="button" value="tab5-1" />
<input type="button" value="tab5-2" />
<input type="button" value="tab5-3" />
</div>
</body>2. jQquery
<script src="js/js.js"></script>
<script>
$('#div1>:button').on('click', function(){
$(this).addClass('active').siblings().removeClass('active');
// The subscript of the clicked button in the red button let i = $(this).index();
$('.box1').eq(i).show().siblings('.box1').hide();
});
$('.box1>:button').on('click',function(){
$(this).addClass('active').siblings('input').removeClass('active');
// The index of the three inputs of the same generation as the clicked button let i = $(this).parent().find('input').index(this);
$(this).parent().find('div').eq(i).show().siblings('div').hide();
})
Execution Result:
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: How to use Linux whatis command
Recommend
Detailed explanation of VUE's data proxy and events
Table of contents Review of Object.defineProperty...
Solve the problem of MySQL reporting Invalid default value for ''operate_time'' error
Execute the create table statement in the databas...
Analysis and application of irregular picture waterfall flow principle
The layout problem of irregular picture walls enc...
Examples of optimization techniques for slow query efficiency in MySQL IN statements
The table structure is as follows. There are only...
mysql startup failure problem and scenario analysis
1. One-stop solution 1. Problem analysis and loca...
Example of creating a virtual host based on Apache port
apache: create virtual host based on port Take cr...
Detailed explanation of the usage of Object.assign() in ES6
Table of contents 2. Purpose 2.1 Adding propertie...
About the basic configuration tutorial of MySQL5.7.17 free installation version under Win10 (with pictures and text)
Database application is an indispensable part of ...
Implementing custom radio and check box functions with pure CSS
1. Achieve the effect 2 Knowledge Points 2.1 <...
How to implement mysql database backup in golang
background Navicat is the best MySQL visualizatio...
Quickly master the use of Docker to build a development environment
As the platform continues to grow, the project...
Using Zabbix to monitor the operation process of Oracle table space
0. Overview Zabbix is an extremely powerful ope...
How to use an image button as a reset form button
When we make a form, we often set a submit button ...
Implementation of communication between Vue and Flask
Install axios and implement communication Here we...
Introduction to the method attribute of the Form form in HTML
1 method is a property that specifies how data is ...