<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="../JS/JQuery/jquery-1.9.1.js" type="text/javascript"></script> <style type="text/css"> .content { margin: 50px; border: 8px; width: auto; height: auto; } .title { height: 20px; width: auto; } .common { width: 20%; float: left; font-size: 20px; color: Black; background-color: #E0E0E0; } .selected { background-color: #EEE; } .contentBody { width: auto; height: 500px; } .contendiv { padding: 20px; width: 97%; height: 500px; float: left; background-color: #EEE; } .divHidden { display: none; } </style> <script type="text/javascript"> $(function() { $(".common").click(function() { var divId = $(this).attr("id"); //alert(divId); if (jQuery(this).attr("class").indexOf("selected") > 0) { //jQuery(this).removeClass("selected") } else { $("div").removeClass("selected"); jQuery(this).addClass("selected"); } //var list = $(".contendiv"); $(".contendiv").addClass("divHidden"); $("#div" + divId).removeClass("divHidden"); }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <div class="content"> <div class="title"> <div id="1" class="common selected"> Tab1 </div> <div id="2" class="common"> Tab2 </div> <div id="3" class="common"> Tab3 </div> </div> <div class="contentBody"> <div id="div1" class="contendiv"> 我是tab1 </div> <div id="div2" class="contendiv divHidden"> 我是tab2 </div> <div id="div3" class="contendiv divHidden"> 我是tab3 </div> </div> </div> </div> </form> </body> </html>
这个是一个最简单最原始的基本Tab切换的样子。很简单，刚学习样式布局JQuery的同学可以参考。大牛就不要拍砖了。
只要控制好头部的DIV的点击事件就OK了，下面对应的三个DIV的相对应切换隐藏。So Easy！