先发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" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script
type="text/javascript">
$(document).ready(function(){
var $div_li=$("div.menu ul
li");
$div_li.click(function(){
$(this).addClass("selected")
.siblings().removeClass("selected");
var
index=$div_li.index(this);
$("div.info>div")
.eq(index).show(500)
.siblings().hide(500);
}).hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});
});
</script>
<title>滑动门</title>
<link href="style/css.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div class="menu">
<ul>
<li>家具</li>
<li>龙头</li>
<li>浴室柜</li>
</ul>
</div>
<div class="info">
<div>
<ul>
<li>又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后</li>
<li>l，您将找到许多可以在线编辑并测试的
jQuery</li>
<li>之后又一个优秀的Javascript框架，其宗旨</li>
<li>列文章最后一篇，希望这些实用的插件</li>
<li>js特效代码大全，JS广告代码，导航</li>
<li>js特效代码大全，JS广告代码，导航</li>
</ul>
</div>
<div
class="hide">
<ul>
<li>主题547605个，贴子39022682篇，仙后12841缩后</li>
<li>版街舞
达人秀惊现软骨哥独创软版街舞转贴到土</li>
<li>淋漓尽致的一位选手，他独创的</li>
<li>舞曲,最好听的dj音乐,免费dj舞曲下载,我们一直至力</li>
<li>js特效代码大全，JS广告代码，导航</li>
<li>《布鲁塞尔大广场》，选自《世界名街》长春人名导航</li>
</ul>
</div>
<div
class="hide">室柜</div>
</div>
<br>
<div class="menu">
<ul>
<li>家具</li>
<li>龙头</li>
<li>浴室柜</li>
</ul>
</div>
<div class="info">
<div>家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具</div>
<div
class="hide">龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头</div>
<div
class="hide">浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室柜</div>
</div>
</body>
</html>
然后建立一个在style文件夹里建立css.css文件
body{
font-size:12px;}
.menu
{width:400px; height:30px;border-bottom:#999 solid 1px;}
.menu ul{ padding:0;
margin:0;}
.menu ul li{
display:block; height:29px; width:80px; float:left; line-height:28px;
text-align:center; list-style:none;border:#999 solid 1px;
border-bottom:none;}
.info{width:398px; border-left:#999
solid 1px; border-right:#999 solid 1px; height:280px;border-bottom:#999 solid
1px;}
.info ul{
padding:0 ; margin:0; list-style:none;}
.hide{ display:none;}
.selected,.hover{
background-color:#CCC;}
样式不符合者可以自行修改css文件。
