<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>鼠标点击左侧，右侧显示内容</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function (){
$("#newsTab a").each(function(index){//each变例，每一个a标签
$(this).click(function(){//鼠标滑过a的时候
$(".news").addClass("dis")//给news添加样式dis
$(".news:eq("+index+")").removeClass("dis")//给对应news的index索引值删除dis样式
$("#newsTab a").removeClass("hover")//先删除所有的a的样式hover
$(this).addClass("hover")//给对应的a添加样式hover
})
})
})
</script>
<style type="text/css">
*{padding:0margin:0}
li{ list-style-type:none}
.box{ width:1000pxheight:500pxborder:1px solid #333margin:0 auto}
#newsTab{width:200pxheight:500pxborder-right:1px solid #333float:left}
#newsTab li{ width:200px}
#newsTab a{ width:200pxheight:28pxline-height:28pxtext-decoration:nonecolor:#fffbackground:#cccborder-bottom:1px solid #777display:inline-blocktext-align:center}
.news{width:799pxheight:500pxbackground:#cccfloat:left}
.dis{display:none}
#newsTab .hover{background:redfont-weight:600}
</style>
</head>
<body>
<div class="box">
<ul id="newsTab">
<li><a href="#" class="hover">国内新闻</a></li>
<li><a href="#">娱乐新闻</a></li>
<li><a href="#">体育新闻</a></li>
</ul>
<ul class="news" >
<li>国内昨天下公交车的时候，捡到5块，回到家发现公交卡丢（刚充了100）</li>
</ul>
<ul class="news dis">
<li>早上被雨淋了</li>
</ul>
<ul class="news dis">
<li>北京3-1领先广东队</li>
</ul>
</div>
</body>
</html>
原码是这样的。在CSS定义：
A.a06:link{color:#0b0096}
A.a06:visited {color:#800080}
A.a06:active,A.a06:hover {color:#ff0000}
然后在页面的连接码里，加上：
<a ...... class=a06>......</a>就可以了。
