Javascript
js-方法一（判断法）
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{ padding: 0; margin: 0; } li{ list-style: none; } </style> <script> function tab(pid){ var tabs=["tab1","tab2","tab3","tab4"]; for(var i=0;i<4;i++){ if(tabs[i]==pid){ document.getElementById(tabs[i]).style.display="block"; }else{ document.getElementById(tabs[i]).style.display="none"; } } } </script> </head> <body> <div id="tanContainer"> <div id="tabNav"> <ul> <li onclick="tab('tab1')">标题一</li> <li onclick="tab('tab2')">标题二</li> <li onclick="tab('tab3')">标题三</li> <li onclick="tab('tab4')">标题四</li> </ul> </div> <div id="tab"> <div id="tab1">内容一</div> <div id="tab2">内容二</div> <div id="tab3">内容三</div> <div id="tab4">内容四</div> </div> </div> </body> </html>
JS 方法二。先隐藏所有内容，再显示选中区域
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{ padding: 0; margin: 0; } li{ list-style: none; float:left; } #tabCon{ clear: both; } #tabCon_1{ display: none; } #tabCon_2{ display: none; } #tabCon_3{ display: none; } </style> <script> function changeTab(tabCon_num){ for(i=0;i<=3;i++) { document.getElementById("tabCon_"+i).style.display="none"; //将所有的层都隐藏 } document.getElementById("tabCon_"+tabCon_num).style.display="block";//显示当前层 } </script> </head> <body> <div id="tanContainer"> <div id="tab"> <ul> <li onclick="changeTab('0')">标题一</li> <li onclick="changeTab('1')">标题二</li> <li onclick="changeTab('2')">标题三</li> <li onclick="changeTab('3')">标题四</li> </ul> </div> <div id="tabCon"> <div id="tabCon_0">内容一</div> <div id="tabCon_1">内容二</div> <div id="tabCon_2">内容三</div> <div id="tabCon_3">内容四</div> </div> </div> </body> </html>
jQuery 方法
<html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <style> body{ widows: 500px; height: 500px; } ul{ width: 500px; height: 30px; border: 1px solid grey; } li{ border: 1px solid grey; float: left; width: 248px; height: 28px; } .tab{ background: pink; width: 500px; height: 400px; } .hide{ display: none; } .active{ color: red; } </style> <script type="text/javascript"> $(document).ready(function(){ //Default $('li:first').addClass('active'); $(".tab").addClass('hide'); $(".tab:first").removeClass('hide'); //Click Event $("ul").find("li").on('click',function(){ //find()遍历所有li var i=$(this).index(); //index()获得当前元素索引（0，1，2，。。。） $('li').removeClass('active'); $(".tab").addClass('hide'); $(".tab").eq(i).removeClass('hide'); //eq()返回当前选择器中指定索引的元素 $(this).addClass('active'); }); }); </script> </head> <body> <ul > <li >首页</li> <li >新闻</li> </ul> <div class="content"> <div class="tab">首页内容</div> <div class="tab" >新闻内容 *************</div> </div> </body> </html>