简易选项卡功能
话不多说上代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<style>
* {
font-family:"宋体";
padding:0px;
margin:0px
}
ul {
margin-left:10px
}
li {
list-style:none;
display:inline-block;
border-radius:5px;
width:100px;
height:40px;
border:1px solid gray;
border-bottom:none;
font-size:20px;
line-height:40px;
text-align:center;
font-weight:600;
background-color:ghostwhite;
margin-left:-5px
}
.mydiv {
border:3px solid orange;
float:left;
width:600px;
height:350px;
margin-top:-1px;
display:none;
color:orangered;
font-size:20px
}
.selectli {/*选中li的样式*/
background-color:orangered;
color:white;
}
.selectdiv {/*选中div的样式 显示*/
display:block;
}
</style>
<script src="js/jquery-1.8.2.min.js"></script>
<script>
$(function () {
$("li:first").addClass("selectli");//加载时给第一个li 添加默认选中样式
var idval = $("li:first").attr("id");//注意id 以便拼接
$("#div" + idval).addClass("selectdiv");//显示第一个div
$("li").click(function () {
$("li").removeClass("selectli");//点击li时 先移除所有之前的样式
$("div").removeClass("selectdiv");
$(this).addClass("selectli");//然后再添加样式
var liid = $(this).attr("id");
$("#div" + liid).addClass("selectdiv");
});
});
</script>
</head>
<body>
<ul>
<li id="li1">my51job</li>
<li id="li2">职位搜索</li>
<li id="li3">简历管理</li>
</ul>
<div id="divli1" class="mydiv">一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一</div>
<div id="divli2" class="mydiv">二二二二二二二二二二二二二二二二二二二二二二二二二二二二二二</div>
<div id="divli3"class="mydiv">三三三三三三三三三三三三三三三三三三三三三三三三三三三三三三</div>
</body>
</html>
页面效果:
欢迎转载