html css js直接用就好
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>縱向tab標簽切換效果</title> <style> *{ margin:0; padding:0;list-style: none;} body {font:12px/1.5 Tahoma;} #outer {width:450px;margin:150px auto;} #tab {width:150px;float:left;overflow:hidden;zoom:1;background:#000;border:1px solid #000;} #tab li {color:#fff;height:30px;cursor:pointer; line-height:30px;width:150px;} #tab li.current {color:#000;background:#ccc;} #content {width:295px;float:left;border:1px solid #000;height:400px; } #content div {line-height:25px;display:none;margin:0 30px;padding:10px 0;} </style> </head> <body> <!-- html代碼begin --> <div id="outer"> <ul id="tab"> <li class="current">tab標簽</li> <li>qq在線客服代碼</li> <li>css3</li> </ul> <div id="content"> <div style="display:block;"> <a href="http://www.lanrenzhijia.com/tab">tab標簽</a> </div> <div> <a href="http://www.lanrenzhijia.com/service">qq在線客服代碼</a> </div> <div> <a href="http://www.lanrenzhijia.com/js/css3">css3</a> </div> </div> <div style="clear: both;"></div> </div> <!-- html代碼end --> <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script> <script> //獲取變量==>存變量==>給變量綁定屬性 $(function(){ var $li = $('#tab li');//獲取每一個標題和內容用變量存起來 var $ul = $('#content div'); $li.click(function(){ var $this = $(this);//用變量把點擊的每一個當前的li存起來 var $t = $this.index();// 獲取當前li下標 $li.removeClass();//因為默認是第一個顯示 所以先移除 $this.addClass('current');//再添加當前的 $ul.css('display','none');//因為默認是第一個顯示 所以先隱藏 $ul.eq($t).css('display','block');//當前內容再出現 }) }); </script> </body> </html>