JavaScript及jQuery實現tab標籤頁切換
阿新 • • 發佈：2018-12-31
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery.min.js"></script> </head> <body> <style> .box{ width: 215px; height: 150px; } .tab{ width: 215px; height: 50px; } span{ float: left; height: 50px; padding: 0 30px; border: 1px solid #333333; text-align: center; cursor: pointer; } .content div{ height: 100px; width: 212px; border: 1px solid #333333; } .tab_active{ background-color: #FF0000; } .show{ background-color: #c9c9c9; display: block; } </style> <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'); // }); // }); //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中單獨設定它。