转载自：https://blog.csdn.net/qq_36526512/article/details/80902914
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery实现标签页切换 </title> <style> .box{ 215px; height: 150px; } .tab{ 215px; height: 50px; } span{ float: left; height: 50px; padding: 0 30px; border: 1px solid #333333; text-align: center; cursor: pointer; } .content div{ height: 100px; 212px; border: 1px solid #333333; } .tab_active{ background-color: #FF0000; } .show{ background-color: #c9c9c9; display: block; } </style> <script src="js/jquery-3.4.1.js"></script> </head> <body> <div class="box"> <div class="tab"> <span class="tab_active">1</span> <span>2</span> <span>3</span> </div> <div class="content"> <div class="show">content1</div> <div class="show" style="display: none;">content2</div> <div class="show" style="display: none;">content3</div> </div> </div> <script> /* //jquery $(function(){ //点击切换 $('span').click(function(){ $(this).addClass('tab_active').siblings().removeClass('tab_active'); var i = $(this).index(); $('.content div').eq(i).css('display','block').addClass('show').siblings().css('display','none'); }); //鼠标经过标签页切换 $('span').mouseover(function(){ $(this).addClass('tab_active').siblings().removeClass('tab_active'); var i = $(this).index(); $('.content div').eq(i).css('display','block').addClass('show').siblings().css('display','none'); }); }); */ //JavaScript var tabs = document.getElementsByTagName('span'); var contents = document.getElementsByClassName('content')[0]; var aaa= contents.getElementsByTagName('div'); for(var i = 0, len1 =tabs.length; i<len1; i++){ tabs[i].index = i; tabs[i].onclick = function(){ for(var j = 0; j < tabs.length; j++){ tabs[j].className = ""; aaa[j].style.display = "none"; } tabs[this.index].className = "tab_active"; aaa[this.index].style.display = "block"; } } </script> </body> </html>
JavaScript中第二行获取ClassName时得到的是一个list，无论拥有这个class的元素是一个还是多个，均会是一个list，而在接下来获取contents的子元素时，js不知道获取的list中的哪个，所以需要在获取到classname为“content”的元素时加了[0]。所以最好使用id来标记元素，那样不需考虑获取的元素是不是list。
jQuery在使用中能极大的减少代码量，但是需要理解var i = $(this).index();这句代码，它的作用是获取被点击的标签的索引值，这个索引值先保存到i中，在之后的显示标签时，能确定相对应的内容。
在content中，如果每个div的状态样式都是一样的，就可以设为同样的class，不需再js或jQuery中单独设置它。
原文链接：https://blog.csdn.net/qq_36526512/java/article/details/80902914
效果图：
