本文主要是介绍简易选项卡jquery版，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<!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>
这篇关于简易选项卡jquery版的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
