- it
- 列表点击灰色
<!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>
<title> new document
</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
body, div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dd, dt, img, form { padding:0px; margin:0px; border:0; font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-size:14px; font-weight:100; margin-top:0px !important; margin-bottom:0px !important;}
ul li {list-style:none;}
a{text-decoration:none;}
.box{width:100%;back-ground:#F2F2f2;}
.content{width:1000px;height:500px;margin:0 auto;background-color:#FFF;}
.qe li a{ font-size:14px; color:#000000;width:176px;font-weight:bolder; text-align:center;display:block; height:40px; border:solid 1px #E5E5E5; border-top:0px solid #E5E5E5;line-height:40px; }
.qe li a:hover{ font-size:15px; color:#C30D23;background:#fff;}
.yang{background: #EAE9E7;}
</style>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(".shx").click(function(){
$(this).addClass('yang').siblings().removeClass("yang");
});
$('#zcc').addClass('yang');
});
</script>
</head>
<body>
<div class="box">
<div class="content">
<div style="width:176px;background-color:#EAE9E7;">
<div>
<img src="about.png" style="width:176px;">
</div>
<div class="qe" style="float:left;width:176px;">
<ul>
<li class="shx" id="zcc"><a href="#">企业简介
</a></li>
<li class="shx"><a href="#">公司资质
</a></li>
<li class="shx"><a href="#">平台公告
</a></li>
<li class="shx"><a href="#">行业新闻
</a></li>
<li class="shx"><a href="#">招贤纳士
</a></li>
<li class="shx"><a href="#">合作伙伴
</a></li>
<li class="shx"><a href="#">联系我们
</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
更多专业前端知识，请上
【猿2048】www.mk2048.com
