程序博客网 > 网页设计软件

简易选项卡jquery版

来源：互联网发布：网页设计软件编辑：程序博客网时间：2024/05/22 06:26

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
button{
background:white;
}
.active{
background:rgba(237,222,14,1.00)
}
div{
background:yellow;
width:100px;
height:100px;
display:none;
}
</style>
<script type="text/javascript">
$(function(){
var divpanel=$("div").get();
var but=$("input").get();
console.log(divpanel)
console.log(but)
for(var i=0;i<but.length;i++){
but[i].index=i
$(but[i]).click(function(){
for(var i=0;i<but.length;i++){
$(but[i]).removeClass("active");
$(divpanel[i]).hide();
}
$(divpanel[this.index]).show();
$(this).addClass("active");
})
}
});

</script>

</head>

<body>
<input class="active" type="button" value="1"/>
<input type="button" value="2"/>
<input type="button" value="3"/>
<div id="div1" style="display:block;">111</div>
<div id="div2">222</div>
<div id="div3">333</div>
</body>
</html>

0 0

网页设计软件

网页设计软件

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子 s001vip靠谱不美丽修行根本不靠谱花旗金融贷款靠谱不家有萌妻纯禽老公不靠谱过敏原检测八成不靠谱猿辅导系统班靠不靠谱在拼多多上买手机靠谱不埋线避孕到底靠不靠谱华哥传奇6个8礼包靠谱不穿鞋子挂不住后脚妙招鞋子大不跟脚怎么办鞋子拉链拉不动怎么办怎么让鞋子不臭鞋子不透气骆驼的鞋子好不好 zhr鞋子是不是品牌从五双不同的鞋子中任取四只鞋子洗不干净怎么办鞋子合不合脚只有自己知道梦到鞋子找不到了鞋子上的粘扣不粘了小窍门穿过的鞋子千万不能卖给别人从5双不同的鞋子中任取4只合成革的鞋子好不好蛇女不能买鞋子吗 37码的鞋子是不是230 送男朋友鞋子好不好不用系鞋带的鞋子羊猄皮的鞋子好不好生日送鞋子好不好梦见鞋子找不到了是什么意思他她鞋子凶猛老公吃不饱不饱食以终日下一句冰清玉洁喂不饱不饱食以终日两个人都喂不饱你贱人吃不饱将军如狼喂不饱饱不洗头还是饿不洗头不饱食以终日全篇