現在商城網頁上會有下拉框切換內容，是如何實現的呢，研究了一天，在調整js代碼和查找bug。最終完成了自己想要的效果，我沒有寫CSS樣式，只是實現了基本功能，如果對你有所幫助，可以自己寫css，使其更加美觀。廢話不多說，直接復制代碼即可看到演示效果。
1.效果展示：
2.代碼實現：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> </head> <body class="diamond"> <select name="status" id="tabs"> <option>ALL</option> <option>change1</option> <option>change2</option> <option>change3</option> </select> <div id="content"> <div id ="chanpin1" > 記得早先少年時 大家誠誠懇懇 說一句 是一句 </div> <div id ="chanpin2" > 清早上火車站 長街黑暗無行人 賣豆漿的小店冒着熱氣 </div> <div id ="chanpin3"> 從前的日色變得慢 車，馬，郵件都慢 一生只夠愛一個人 </div> </div>
//JS部分實現效果
<script> $(function(){ var li = $('#tabs'); var cc=$('#tabs option'); var len=cc.length; li.change(function(){ // alert(123); var t = parseInt(li.get(0).selectedIndex); // var id=$('#chanpin'+t); // alert(t) ; for(var i= 1;i<len;i++){ if(t==i){ // alert(i); $('#chanpin'+t).show(); }else{ $('#chanpin'+i).hide(); } if(t==0){$('#chanpin'+i).show();} } }); }); </script> </body> </html>
上述含有展示所有內容的tab標簽切換的效果如下：
2.代碼實現：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <style type="text/css"> *{padding:0;margin:0;} #tabs {background: #ff0;border: 1px solid #000;} #tabs ul{width: 100%;display: block;height: 40px;margin-bottom: 20px;} #tabs li{float: left;list-style: none;border: 1px solid #ccc;padding:10px;cursor:pointer; background: #0ff;} .diamonded {width: 500px;background: #ccc;margin: 20px auto;} #tabs div {margin-left: 10px;} div#content {padding: 20px 0;text-align: center;} .cc{clear:both;} </style> </head> <body class="diamond"> <div class="diamonded"> <ul id="tabs"> <li >ALL</li> <li>change1</li> <li>change2</li> <li>change3</li> <div class="cc"></div> </ul> <div id="content"> <div id ="chanpin1" > 記得早先少年時 大家誠誠懇懇 說一句 是一句 </div> <div id ="chanpin2" > 清早上火車站 長街黑暗無行人 賣豆漿的小店冒着熱氣 </div> <div id ="chanpin3"> 從前的日色變得慢 車，馬，郵件都慢 一生只夠愛一個人 </div> </div> </div> <script> $(function(){ var li=$('#tabs li'); var len=li.length; li.click(function(){ // alert(123); var t = parseInt(li.index(this)); // var id=$('#chanpin'+t); // alert(t) ; for(var i= 1;i<len;i++){ if(t==i){ // alert(i); $('#chanpin'+t).show(); }else{ $('#chanpin'+i).hide(); } if(t==0){$('#chanpin'+i).show();} } }); }); </script> </body> </body> </html>
1.Tab標簽切換效果展示：
2.代碼實現：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <style type="text/css"> *{padding:0;margin:0;} div#tabs {background: #ff0;padding: 0px 0px 20px;border: 1px solid #000;} body.tabchange {width: 500px;margin: 0 auto;} #tabs ul{width: 100%;display: block;height: 40px;margin-bottom: 20px;} #tabs li{float: left;list-style: none;border: 1px solid #ccc;padding:10px;cursor:pointer; background: #0ff;} .hide{display: none;} #tabs div {margin-left: 10px;} </style> </head> <body class="tabchange"> <div id="tabs"> <ul width="100%"> <li class="on">change1</li> <li>change2</li> <li>change3</li> </ul> <div> 記得早先少年時 大家誠誠懇懇 說一句 是一句 </div> <div class="hide" > 清早上火車站 長街黑暗無行人 賣豆漿的小店冒着熱氣 </div> <div class="hide"> 從前的日色變得慢 車，馬，郵件都慢 一生只夠愛一個人 </div> </div> <script type="text/javascript"> $(function(){ var oTab = document.getElementById("tabs"); var oUl = oTab.getElementsByTagName("ul")[0]; var oLis = oUl.getElementsByTagName("li"); var oDivs= oTab.getElementsByTagName("div"); for(var i= 0,len = oLis.length;i<len;i++){ oLis[i].index = i; oLis[i].onclick = function() { for(var n= 0;n<len;n++){ oLis[n].className = ""; oDivs[n].className = "hide"; } this.className = "on"; oDivs[this.index].className = ""; } }; }) </script> </body> </html>
1.鼠標滑過切換的效果圖：
2.另一種簡單的Jquery代碼實現tab標簽切換（如果想實現點擊切換，只需把mouseover改為click即可）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>幾行簡單的jQuery代碼搞定tab標簽切換效果</title> <style> *{ margin:0; padding:0;list-style: none;} body {font:12px/1.5 Tahoma;} #outer {width:450px;margin:150px auto;} #tab {overflow:hidden;zoom:1;background:#000;border:1px solid #000;} #tab li {float:left;color:#fff;height:30px; cursor:pointer; line-height:30px;padding:0 20px;} #tab li.current {color:#000;background:#ccc;} #content {border:1px solid #000;border-top-width:0;} #content ul {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"> <ul style="display:block;"> <a>tab標簽</a> </ul> <ul> <a>qq在線客服代碼</a> </ul> <ul> <a>css3</a> </ul> </div> </div> <!-- html代碼end --> <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script> <script> $(function(){ window.onload = function() { var $li = $('#tab li'); var $ul = $('#content ul'); $li.mouseover(function(){ var $this = $(this); var $t = $this.index(); $li.removeClass(); $this.addClass('current'); $ul.css('display','none'); $ul.eq($t).css('display','block'); }) } }); </script> </body> </html>
！！！提醒：
關於最后一種實現方式，JS和jquery中聲明變量的時候，最好不要使用 “var $li=$('#xxx')”;在一些程序中這樣寫Js代碼是不起作用的，如果聲明變量可以直接使用“var li=$('#xxx');”即可