首页 > 代码库 > jQuery—选项卡
jQuery—选项卡
用jQuery实现选项卡,比原生JS更加简便,但是原理还是一样的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#wrap {
width: 400px;
height: 300px;
margin: 100px auto;
}
#wrap div {
width: 400px;
height: 300px;
border: #333 2px solid;
line-height: 300px;
text-align: center;
font-size: 50px;
display: none;
}
#wrap .active {
background: red;
color: #fff;
}
</style>
<script src="http://www.mamicode.com/jquery.min.js"></script>
<script>
$(function(){
var aBtn = $(‘input‘);
var aDiv = $(‘#wrap div‘);
aBtn.click(function(){
aBtn.removeClass(‘active‘);
aDiv.hide();
$(this).addClass(‘active‘);
aDiv.eq($(this).index()).show();
});
});
</script>
</head>
<body>
<div id="wrap">
<input type="button" value="http://www.mamicode.com/按钮1" class="active">
<input type="button" value="http://www.mamicode.com/按钮2">
<input type="button" value="http://www.mamicode.com/按钮3">
<div style="display: block;">div1</div>
<div>div2</div>
<div>div3</div>
</div>
</body>
</html>
jQuery—选项卡
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。