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: