先发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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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文件。
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
