[HTML] 纯文本查看 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我爱学习</title>
<style>
body, ul, ol, li, div, p {
margin: 0px;
padding: 0px;
}
ul {
list-style-type: none;
border: 1px solid blue;
background: #4f5b93;
height: 45px;
}
ul li {
float: left;
heihgt: 45px;
line-height: 45px;
width: 100px;
text-align: center;
}
ul li a:link, a:visited {
color: #fff;
text-decoration: none;
}
.act {
background: #ff6600;
}
</style>
<script src="http://www.kevin-ying.com/jq/jquery-2.1.4.min.js"></script>
<script>
$(function(){
$('ul li').eq(0).addClass("act");
$('ul li').each(function(){
$(this).click(function(){
$(this).addClass("act").siblings().removeClass("act");
})
})
})
</script>
</head>
<body>
<ul>
<li><a href="http://www.kevin-ying.com/">首页</a></li>
<li><a href="http://www.kevin-ying.com/">随笔</a></li>
<li><a href="http://www.kevin-ying.com/">素材</a></li>
<li><a href="http://bbs.kevin-ying.com/">编程</a></li>
</ul>
</body>
</html>
实现原理：当选中当前元素时，给当前元素添加样式，同级元素移除样式。
| 
发表于 2016-1-26 10:22:03
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
转播
淘帖
|手机版|Archiver|源于生活(个人生活娱乐工作的笔记)css3,html5,学习笔记
