<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击按钮切换内容</title>
<style type="text/css">
.tab-menu ul{
padding: 0;
margin: 0;
}
.tab-menu ul li{
display: inline-block;
width: 200px;
height: 40px;
line-height: 40px;
text-align: center;
cursor: pointer;
}
.tab-menu ul li.active{
background: #749dcf;
}
.tab-con div{
width: 600px;
height: 300px;
background: #F2F2F2;
border: 1px solid #749dcf;;
display: none;
padding: 15px;
}
.tab-con div:first-child{
display: block;
}
</style>
</head>
<body>
<div class="tab-menu">
<ul>
<li class="active">按钮一</li>
<li>按钮二</li>
<li>按钮三</li>
</ul>
</div>
<div class="tab-con">
<div>内容一</div>
<div>内容二</div>
<div>内容三</div>
</div>
<script type="text/javascript" src="js/jquery.1.4.4.min.js"></script>
<script type="text/javascript">
$(function () {
$(‘.tab-menu li‘).click(function () {
$(this).addClass(‘active‘).siblings().removeClass(‘active‘);
// $(‘.tab-top li‘).eq($(this).index()).addClass(‘active‘).siblings().removeClass(‘active‘); tab按钮第二种写法
var index=$(this).index();
$(".tab-con div").eq(index).show().siblings().hide(); //注意着括号里面的div，如果标签下还有div包着,那就改成用类来代替
}) }) </script> <!--整体第二种写法--> <!--<script type="text/javascript"> $(function () { $(‘.tab-menu li‘).click(function () { $(this).addClass(‘active‘).siblings().removeClass(‘active‘)； $(".tab-con div").eq($(this).index()).show().siblings().hide();//注意着括号里面的div，如果标签下还有div包着,那就改成用类来代替 }) }) </script>--> </body> </html>
jQuery基础 html+css3+jquery 点击按钮切换内容