//css样式*{margin: 0;padding: 0;}li{list-style-type:none;float:left;}div.card{overflow:hidden;}div.card li{width:110px;height:50px;background:linear-gradient(#e1670e,orange,#e1670e);cursor:pointer;text-align: center;line-height: 50px;}div.card li.active{background: linear-gradient(green,lightgreen,green);}div.con{width:330px;height:200px;overflow:hidden;}div.con li{width:330px;height:200px;display:none;background: linear-gradient(45deg,green,lightgreen);line-height: 50px;text-indent: 2em;}div.con li.active{display:block;}
html部分
<div class="card" id="card"><ul><li class="active">奶茶1</li><li>奶茶2</li><li>奶茶3</li></ul></div><div class="con" id="con"><ul><li class="active">中国好奶茶1</li><li>中国好奶茶2</li><li>中国好奶茶3</li></ul></div>
JS代码
(function(){try{var card=document.getElementById("card");var cardLi=card.getElementsByTagName("li");var con=document.getElementById("con");var conLi=con.getElementsByTagName("li");for(var i=0;i<cardLi.length;i++){cardLi[i].index=i;cardLi[i].onclick=function(){console.log(this.index);for(var i=0;i<cardLi.length;i++){cardLi[i].className="";conLi[i].className="";}this.className="active"; conLi[this.index].className="active";}}}catch(err){return false}})();
