JS实现下拉框切换和tab标签切换
Posted 筱风能动浪，岸树不遮山
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实现下拉框切换和tab标签切换相关的知识，希望对你有一定的参考价值。
现在商城网页上会有下拉框切换内容，是如何实现的呢，研究了一天，在调整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(\'js原生实现tab标签切换（可滑动）