-
-10 15
-
演示地址：http://www.phplover.cn/jquery/1.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" />
<title>MiniĻ</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
<!--jQuery(function($){
$('div.hover,div.click').each(function(i){
$(this).children('label:first').addClass('select');//初始化第一个选项
$(this).next('div').html($(this).children('div:first').html())
});$('div.hover label').hover(function(){
$(this).addClass('select').siblings('label').removeClass('select').parents('div.hover').next('div:first').html($(this).next('div:first').html())
},function(){});$('div.click label').click(function(){
$(this).addClass('select').siblings('label').removeClass('select').parents('div.click').next('div:first').html($(this).next('div:first').html())
},function(){});
})
//-->
</script><style type="text/css">
<!--
div.hover , div.click{padding:0px;margin:0px;}
div.hover>label , div.click>label{float:left;display:block;line-height:22px;padding:0px 3px;margin:0px;}
div.hover>label.select , div.click>label.select{background:#EEE;border:1px solid #CCC;border-bottom:none;}
div.hover>div , div.click>div{display:none;}div.show{display:block;clear:both;padding:0px;margin:0px;border:1px solid #CCC;background:#EEE;}
-->
</style>
</head>
<body><h1>最Mini的滑动门</h1>
<h2>滑动效果</h2><div class="hover">
<label>标题1</label>
<div>
<div>
<p>标题1对应的内容</p>
<p>标题1对应的内容</p>
<p>标题1对应的内容</p>
<p>标题1对应的内容</p>
</div>
</div><label>标题2</label>
<div>标题2对应的内容<br/>标题2对应的内容<br/>标题2对应的内容<br/>标题2对应的内容</div>
<label>标题3</label>
<div>标题3对应的内容<br/>标题3对应的内容<br/>标题3对应的内容<br/>标题3对应的内容</div>
</div><div class="show">Loading...</div>
<h2>点击效果</h2>
<div class="click">
<label>标题1</label>
<div>
<p>标题1对应的内容</p>
<p>标题1对应的内容</p>
<p>标题1对应的内容</p>
<p>标题1对应的内容</p>
</div>
<label>标题2</label>
<div>
<p>标题2对应的内容</p>
<p>标题2对应的内容</p>
<p>标题2对应的内容</p>
<p>标题2对应的内容</p>
</div>
</div>
<div class="show">Loading...</div>
</html>
本文来源于php爱好者：php教程 —http://www.phplover.cn/
原文地址：http://www.phplover.cn/post/minifadongmenxiaoguo.html
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
1楼 ZNZBLOG
Post:2009-10-21 16:04:32