js原生的，不建议使用：
原理：a的name对应div的id
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> html,body{padding: 0; margin: 0} #title a{ width: 33.3%; float: left; line-height: 30px;text-align: center; background-color: red; } </style> </head> <body> <div id="title"> <a name="page1" onclick="myf()">主页</a> <a name="page2" onclick="myf()">音乐</a> <a name="page3" onclick="myf()">个人</a> </div> <div id="father"> <div id="page1" >我的主页</div> <div id="page2" >聆听我的</div> <div id="page3" >私人领地</div> </div> <script type="text/javascript"> var title_a=document.getElementsByTagName("a"); var page=document.getElementById("father"). getElementsByTagName("div"); function myf(){ var _that=event.target; var idname=_that.getAttribute("name"); //选项卡原理：a的name对应div的id for (var i=0; i<title_a.length; i++) { //对应菜单切换 title_a[i].style.backgroundColor="#D9D9D9";//设置所有的样式 _that.style.backgroundColor="red";//设置当前点选中的样式 //对应内容切换 page[i].style.display="none";//设置所有的样式为隐藏 document.getElementById(idname).style.display="block"; } } //默认选中第一个 document.getElementsByTagName("a")[0].click(); </script> </body> </html>
jq版本1
原理：以索引为对应
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <style type="text/css"> html,body,ul{padding: 0; margin: 0} ul li{list-style: none; width: 33.3%; line-height:50px; float: left; color:white; text-align: center;} </style> </head> <body> <ul class="tab"> <li>主页</li> <li>音乐</li> <li>个人</li> </ul> <div class="cotent"> <div>我的主页</div> <div>聆听我的</div> <div>私人领地</div> </div> <script type="text/javascript"> $(".tab li").click( function(){ $(this).css({"background-color":"red"}) $(this).siblings().css({"background-color":"#D9D9D9"}); var i=$(".tab li").index(this);//选项卡原理：以索引为对应 $(".cotent").children("div").eq(i).css({"display":"block"}) $(".cotent").children("div").eq(i).siblings().css({"display":"none"}) } ) $(".tab li:eq(0)").click() </script> </body> </html>
jq版本2
原理：以class为对应
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <style type="text/css"> html,body,ul{padding: 0; margin: 0} ul li{list-style: none; width: 33.3%; line-height:50px; float: left; color:white; text-align: center;} </style> </head> <body> <ul class="tab"> <li class="a">主页</li> <li class="b">音乐</li> <li class="c">个人</li> </ul> <div class="cotent"> <div class="a">我的主页</div> <div class="b">聆听我的</div> <div class="c">私人领地</div> </div> <script type="text/javascript"> $(".tab li").click( function(){ $(this).css({"background-color":"red"}); $(this).siblings().css({"background-color":"#D9D9D9"}); var i=$(this).attr("class");//选项卡原理：以class为对应 $(".cotent").children("."+i).css({"display":"block"}); $(".cotent").children("."+i).siblings().css({"display":"none"}); } ) $(".tab li:eq(0)").click() </script> </body> </html>
jq版本3，推荐使用
原理：自定义属性data-name为对应
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title></title> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <style type="text/css"> html,body,ul{padding: 0; margin: 0} ul li{list-style: none; width: 33.3%; line-height:50px; float: left; color:white; text-align: center;} </style> </head> <body> <ul class="tab"> <li data-name="a">主页</li> <li data-name="b">音乐</li> <li data-name="c">个人</li> </ul> <div class="cotent"> <div data-name="a">我的主页</div> <div data-name="b">聆听我的</div> <div data-name="c">私人领地</div> </div> <script type="text/javascript"> $(".tab li").click( function(){ $(this).css({"background-color":"red"}); $(this).siblings().css({"background-color":"#D9D9D9"}); var liname=$(this).data("name");//选项卡原理：自定义属性data-name为对应 var myDiv=$(".cotent").children(); for (var i=0; i<myDiv.length; i++) { if(myDiv.eq(i).data("name")==liname){ myDiv.eq(i).css({"display":"block"}); myDiv.eq(i).siblings().css({"display":"none"});//或者将该句注释，释放下句注释 } //else if(myDiv.eq(i).data("name")!=liname){myDiv.eq(i).css({"display":"none"});} } } ) $(".tab li:eq(0)").click() </script> </body> </html>