关键点:建立点击事件和显示事件的连接,即点li 1让对应的div1出来,很容易想到遍历、索引
*{margin: 0; padding: 0;} ul,li{list-style: none;} .tab{background: rgba(2, 153, 255, 0.31); width:350px; height:200px; overflow: hidden;} .tab ul{overflow: hidden; background: #359df6;} .tab ul li{float: left; width: 80px; height: 40px; line-height: 40px; text-align: center;} .tab ul li.selected{background: red; color: #fff;} .tab div{display: none;} .tab div.selected{display: block;}
<div class="tab" id="tab"> <ul> <li class="selected">li 1</li> <li>li 2</li> <li>li 3</li> </ul> <div class="selected">div 1</div> <div>div 2</div> <div>div 3</div> </div>
var oTab = document.getElementById("tab"); var oLis = oTab.getElementsByTagName("li"); var oDivs = oTab.getElementsByTagName("div"); for (var i = 0; i < oLis.length; i++) {
//这是自定义属性的写法 /*oLis[i].index=i; oLis[i].οnclick=function(){ for(var j=0;j<oDivs.length;j++){ oLis[j].className=""; oDivs[j].className=""; } oLis[this.index].className="selected"; oDivs[this.index].className="selected"; }*/
//这是闭包的写法 (function aaa(index) { oLis[index].onclick = function (i) { for (var j = 0; j < oDivs.length; j++) { oLis[j].className = ""; oDivs[j].className = ""; } oLis[index].className = "selected"; oDivs[index].className = "selected"; } })(i) }
<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
//这个是jquery的写法,该方法可以写一个,用于一个页面中的多个tab,只要结构一样。
$(".tab li").click(function(){ var $index=$(this).index(); $(this).addClass("selected").siblings().removeClass("selected"); $(this).parent().siblings().each(function(index,item){ index === $index ? $(item).addClass("selected") : $(item).removeClass("selected"); }) })