<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button.active{
color: white;
background-color:red;
}
</style>
</head>
<body>
<!-- 要求：用三个按钮和三个div方块编写一个选项卡，要求按钮在切换时变化背景颜色,同时div的内容也发生改变 -->
<div>
<div>
<button class="active">1111</button>
<button>2222</button>
<button>3333</button>
</div>
<div>
<p>1的内容</p>
<!-- <p style="display: none;">2的内容</p>
<p style="display: none;">3的内容</p> -->
</div>
</div>
<script src="jquery-1.10.1.min.js"></script>
<script>
var arr = ["1的内容","2的内容","3的内容"];
$("button").click(function (){
$("button").removeClass("active").eq($(this).index()).addClass("active");
$("p").html(arr[$(this).index()]);
});
</script>
</body>
</html>
Processed:
0.013, SQL:
8
