求HTML代码
<style>
ul{
width:100%;
height:30px;
margin:0 auto;
padding:0px;
list-style-type:none;
border-bottom:4px solid #F59E49;
}
ul li{
float:left;
width:86px;
line-height:29px;
padding:0px 5px;
margin-right:2px;
cursor:pointer;
text-align:center;
border:1px solid #DCD9D9;
border-bottom:none;
border-radius:4px 4px 0px 0px;
background:#EEECEC;
background:-webkit-gradient(linear, left top, left bottom, from(#DAD8D8), to(#ededed));
}
.current{
color:#fff;
background:#F59E49;
border:1px solid #E46819;
border-bottom:none;
background:-webkit-gradient(linear, left top, left bottom, from(#F77624), to(#F59E49));
}
table{
width:100%;
margin:0 auto;
padding:0px;
background:#EEECEC;
}
td{
border:2px solid #fff;
}
</style>
<div style="width:500px;margin:0px;">
<ul class="ul-list">
<li class="current">宝贝类目</li>
<li>集市</li>
<li>品牌商城</li>
<li>二手闲置</li>
<li>店铺</li>
</ul>
<table>
<tr>
<td colspan="2" rowspan="2">阿里巴巴旗下</td>
<td>我要买</td>
<td>我要买</td>
<td>我淘宝</td>
</tr>
<tr>
<td colspan="3" align="center">您好，欢迎来淘宝！</td>
</tr>
</table>
<script type="text/javascript">
$(function(){
$('.ul-list li').hover(function(){
$('.ul-list li').removeClass('current');
$(this).addClass('current');
});
});
</script>
</div>
<!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 type="text/css">
*{padding:0;margin:0;}
#newsTab{width:100px;height:200px;background:#eee; float:left;}
#newsTab li{margin-right:3px;}
#newsTab a{display:block;width:80px; height:28px; line-height:28px; text-align:center; text-decoration:none; color:#fff; background:#000; float:left;}
.news{width:300px;height:150px;background:#ccc;}
.dis{display:none;}
#newsTab .hover{background:red;font-weight:600;}
.left{float:left;}
</style>
</head>
<body>
<div style="width:500px;">
<script type="text/javascript" src="
jquery-1.4.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>
<ul id="newsTab">
<li><a href="#" class="hover">国内新闻</a></li>
<li><a href="#">娱乐新闻</a></li>
<li><a href="#">体育新闻</a></li>
</ul>
<div class="left">
<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>
</div>
</body>
</html>
