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
Complete steps to install mysql5.7 on Mac (with pictures and text)
I recently used a Mac system and was preparing to...
Graphical instructions for uploading and downloading files to a remote Linux host based on SecureCRT
Sometimes it is slow to download large network fi...
How to implement the strategy pattern in Javascript
Table of contents Overview Code Implementation Su...
How to set PATH environment variable in Linux system (3 methods)
1. In Windows system, many software installations...
RHEL7.5 mysql 8.0.11 installation tutorial
This article records the installation tutorial of...
Detailed installation and configuration tutorial of PostgreSQL 11 under CentOS7
1. Official website address The official website ...
A brief summary of all encapsulation methods in Vue
Table of contents 1. Encapsulation API 2. Registe...
Research on the problem of flip navigation with tilted mouse
In this article, we will analyze the production of...
Three ways to forward linux ssh port
ssh is one of the two command line tools I use mo...
Discussion on the problem of iframe node initialization
Today I suddenly thought of reviewing the producti...
Implementation of vue3.0+vant3.0 rapid project construction
Table of contents 1. Project Construction 2. Vue3...
Vue directives v-html and v-text
Table of contents 1. v-text text rendering instru...
Detailed explanation of the use and precautions of crontab under Linux
Crontab is a command used to set up periodic exec...
Detailed explanation of the abbreviation of state in react
Preface What is state We all say that React is a ...
MySQL transaction concepts and usage in-depth explanation
Table of contents The concept of affairs The stat...