不太美观,但是想把这段js代码放上来,自己翻着玩。 <style type="text/css"> .Box { width: 240px; border: 1px solid #000; margin: 100px auto; padd ...
不太美观,但是想把这段js代码放上来,自己翻着玩。
<style type="text/css">
.Box {
width: 240px;
border: 1px solid #000;
margin: 100px auto;
padding: 20px;
}
.con {
width: 100%;
height: 200px;
background-color: #cccccc;
border: 1px solid #000;
margin-top: 10px;
display: none;
}
.current {
background-color: #EEC900;
}
<div id="box">
<button >one</button>
<button>two</button>
<button>three</button>
<button>four</button>
<div >one</div>
<div >two</div>
<div >three</div>
<div >four</div>
</div>
<script>
var box=document.getElementById("box");
var btns=box.getElementsByTagName("button");
var divs=box.getElementsByTagName("div");
for(var i = 0 ; i<btns.length; i++){
btns[i].setAttribute("index",i);
btns[i].onclick=function(){
for(var j =0 ; j<btns.length ; j++){
btns[j].removeAttribute("class");
divs[j].style.display="none";
}
this.setAttribute("class","current");
divs[this.getAttribute("index")].style.display="block";
}
}
</script>
原标题:tab栏的切换【DOM点击事件】
关键词:dom
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。