通过jq封装的方法,可以更简单的制作一个选项卡
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<style>
* {
margin: 0;
padding: 0;
} #btn ul {
width: 300px;
height: 50px;
margin: 50px;
} .on {
color: red;
} #btn ul li {
list-style-type: none;
width: 50px;
height: 50px;
margin-left: 10px;
background: gray;
float: left;
line-height: 50px;
text-align: center;
cursor: pointer;
}
</style>
</head> <body>
<div id="btn">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div> <div>
<div id="jq1"></div>
<div class="jq2"></div>
<div id="jq3"></div>
</div> <script> //通过jq来设置三个要div
$(".jq2")[0].style.width = "100px";
$(".jq2")[0].style.height = "100px";
$(".jq2")[0].style.background = "blue"; $("#jq1")[0].style.width = "100px";
$("#jq1")[0].style.height = "100px";
$("#jq1")[0].style.background = "red"; $("#jq3")[0].style.width = "100px";
$("#jq3")[0].style.height = "100px";
$("#jq3")[0].style.background = "green"; //定义一个变量aLi用于存放btn下面的li,方便使用
var aLi = $("#btn ul li");
//通过hide()方法来设置三个div隐藏
$("div div").hide();
//点击每一个li触发事件clik()方法，方法自带for循环
aLi.click(function() {
//把每个li通过index()方法所带序号存进一个变量中
var iNum = $(this).index();
//addClass()方法是增加类名，removeClass()方法是移出类名
$(this).addClass("on").siblings().removeClass("on");
//隐藏三个框，通过eq()方法选择显示当前li对应序号的框
$("div div").hide().eq(iNum).show();
})
</script>
</body> </html>
载入外链jq，就可以开始写代码了