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>
<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>
