tab switching is to place the mouse on a label and display the related content of the label. The effect is as follows
When the mouse is placed on the movie, the content of the movie is displayed, the content of the TV is displayed on the TV, and the content of the variety is displayed on the variety show,
Code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab Switching exercises</title> <style> .active{ color: orange; } span{ padding: 5px 20px; } .tab_con>div{ display: none; } .tab_con>div.show{ display: block; } </style> </head> <body> <div class="container"> <div class="tabs"> <span class="active">Film</span> <span>television</span> <span>Variety</span> </div> <div class="tab_con"> <div class="show">Movie content</div> <div>TV content</div> <div>Variety content</div> </div> </div> </body> <script src="jquery-1.7.2.min.js"></script> <script> $(".tabs span").mouseenter(function () { //Add an active class to the label the mouse is holding, and delete the active class of its brother label $(this).addClass('active').siblings().removeClass('active') // Get the index 'of the tag the mouse is holding var index=$(this).index(); //Find the content div equal to index, add a show class to it, and delete the show class of its brother Div $('.tab_con>div').eq(index).addClass('show').siblings().removeClass('show') }) </script> </html>
The above code corresponds to the code processing when the order of span tags corresponds to the order of div s in the content one by one
When the order is different
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab Switching exercises</title> <style> .active{ color: orange; } span{ padding: 5px 20px; } .tab_con>div{ display: none; } .tab_con>div.show{ display: block; } </style> </head> <body> <div class="container"> <div class="tabs"> <span class="active" id="movie">Film</span> <span id="tv">television</span> <span id="zy">Variety</span> </div> <div class="tab_con"> <div class="show movie">Movie content</div> <div class="tv">TV content</div> <div class="zy">Variety content</div> </div> </div> </body> <script src="jquery-1.7.2.min.js"></script> <script> $(".tabs span").mouseenter(function () { $(this).addClass('active').siblings().removeClass('active') var id =$(this).attr('id'); $('.tab_con>div').each(function (i) { if($(this).attr('class').indexOf(id)!=-1){ $(this).addClass('show').siblings().removeClass('show') } }) }) </script> </html>