页面
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/s2.css" type="text/css">
</head>
<body>
<div id="box">
<ul id="tab">
<li id="bg1" class="active">HTML/CSS</li>
<li >Javascript</li>
<li >AJAX</li>
<li>Sever Side</li>
</ul>
<div id="tab_list">
<div class="on">
<h1>HTML文本标记语言</h1>
</div>
<div>
<h1>Javascript</h1>
</div>
<div>
<h1>AJAX</h1>
</div>
<div>
<h1>Sever Side</h1>
</div>
</div>
</div>
</body>
</html>
jq特效
<script src="../js/jquery-3.2.1.js" type="application/javascript"></script>
<script>
//获取对象
// 添加点击事件
$("ul li").click(function () {
//获取样式表里的颜色
var Color=$(this).css('background');
//获取 默认选中的li并添加index属性,然后添加选中的class名,最后获取ul的所有的兄弟元素并添加移除class名
$("ul li").eq($(this).index()).addClass("active").siblings().removeClass("active")
//获取 默认选中的div并添加从默认选中样式表里获取背景颜色属性,并追加到div的背景颜色上,然后先让不选中的隐藏,选中的显示;
$("#tab_list div").css('background',Color).hide().eq($(this).index()).show();
})
</script>
css:
*{
margin: 0;
padding: 0;
list-style: none;
}
#box{
width: 495px;
height: 250px;
margin: 0 auto;
margin-top:100px;
}
#tab{
width: 495px;
height: 40px;
}
#tab li:first-child{
margin-bottom: 0px;
}
#tab li:last-child{
margin-right: -5px;
width: 125px;
background: #a9c195;
}
#tab li{
width: 120px;
margin-right: 5px;
float: left;
line-height: 40px;
color: #fff;
text-align: center;
}
#tab .active{
background: #5eb1df;
width: 120px;
height: 45px;
color: #fff;
font-weight:bolder;
}
#tab_list{
margin-top: 5px;
width: 500px;
height: 200px;
}
#tab_list div{
width: 500px;
height: 200px;
background: #5eb1df;
display: none;
color: #fff;
}
#tab_list div h1{
margin-top:25px;
float: left;
font-size: 24px;
font-weight: bolder;
margin-left:22px;
}
#tab_list div p{
margin-top: 1px;
font-size:12px;
}
#tab_list .on{
display: block;
background: #5eb1df;
}
#bg1{
background: #5eb1df;
}
#bg2{
background: #87cbd7;
}
#bg3{
background: #e9bbb3;
}