代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
*{padding:0;margin: 0;}
a,li{text-decoration: none;list-style: none;}
.cent{width: 1100px;border: 1px solid #ccc;border-radius: 2px;margin: 0 auto;height: 750px;position:relative;}
.cent ul{width: 130px;height: 100%;float: left;}
.cent ul a{font-size: 14px;color: #fff}
.cent ul a li{width: 100%;height: 30px;border-bottom: 1px solid #ccc;line-height: 30px;background: #1a8bc6;text-align: center;}
.cent .xuan{background: url(libj.png) no-repeat right #1a8bc6;font-weight: bold;}
.cent_ri{height: 100%;width: 970px;float: right;}
</style>
<body>
<div class="cent">
<ul>
<a href="javascript:void(0)"><li class="xuan">常用网址</li></a>
<a href="javascript:void(0)"><li>视 频</li></a>
<a href="javascript:void(0)"><li>影 视</li></a>
<a href="javascript:void(0)"><li>新 闻</li></a>
<a href="javascript:void(0)"><li>购 物</li></a>
<a href="javascript:void(0)"><li>旅 游</li></a>
<a href="javascript:void(0)"><li>小 说</li></a>
<a href="javascript:void(0)"><li>音 乐</li></a>
<a href="javascript:void(0)"><li>科 技</li></a>
<a href="javascript:void(0)"><li>金 融</li></a>
<a href="javascript:void(0)"><li>军 事</li></a>
<a href="javascript:void(0)"><li>搞 笑</li></a>
<a href="javascript:void(0)"><li>社 交</li></a>
<a href="javascript:void(0)"><li>汽 车</li></a>
<a href="javascript:void(0)"><li>动 漫</li></a>
<a href="javascript:void(0)"><li>女 性</li></a>
<a href="javascript:void(0)"><li>男 性</li></a>
<a href="javascript:void(0)"><li>银 行</li></a>
<a href="javascript:void(0)"><li>招 聘</li></a>
<a href="javascript:void(0)"><li>健 康</li></a>
<a href="javascript:void(0)"><li>直 播</li></a>
<a href="javascript:void(0)"><li>财 经</li></a>
<a href="javascript:void(0)"><li>理 财</li></a>
<a href="javascript:void(0)"><li>软 件</li></a>
</ul>
<div class="cent_ri">
</div>
</div>
<script src="js/jq.js"></script>
<script type="text/javascript">
$(".cent li").click(function(){
$(this).stop().addClass("xuan").siblings().remover();
});
</script>
</body>
</html>
慕村1106498