首页 > 代码库 > 随手笔记，标签切换
随手笔记，标签切换
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>切换</title>
<style type="text/css">
*{
padding:0;
margin:0;
list-style: none;
}
.nav{
height:50px;
width:1000px;
border-top:2px solid #000;
line-height:50px;
text-align:center;
font-size:20px;
font-weight:700;
margin:100px auto;
}
.nav_list{
float:left;
width:198px;
height:50px;
border:1px solid #ddd;
border-top:none;
background-color:#fff;
color:#000;
cursor:pointer;
}
.nav_hover{
background-color:#000;
color:#fff;
width:198px;
height:50px;
border:1px solid #000;
float:left;
cursor:pointer;
position:relative;
}
.nav_hover span{
width:0;
height:0;
border:10px solid transparent;
border-top:10px solid #000;
border-top-color:inherit;
border-bottom:none;
position:absolute;
bottom:-10px;
left:50%;
margin-left:-10px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
$(".nav_list").hover(function(){
$(this).addClass("nav_hover").siblings().removeClass("nav_hover");
})
})
</script>
</head>
<body>
<div class="nav">
<ul>
<li class="nav_list nav_hover">美容护肤<span></span></li>
<li class="nav_list">彩妆工具<span></span></li>
<li class="nav_list">身体护理<span></span></li>
<li class="nav_list">魅力香薰<span></span></li>
<li class="nav_list">男士护肤<span></span></li>
</ul>
</div>
</body>
</html>
随手笔记，标签切换