常见鼠标移入-隐藏内容-显示效果
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
*{
? margin:0;
? padding:0;
}
body{
? margin-left:20px;
? margin-top:20px;
}
ul{
? list-style:none;
}
#out_div{
? border:1px solid #000;
? width:200px;
? height:225px;
? padding:10px 20px;
}
h3{
? padding-bottom:5px;
}
li{
? border-bottom:1px solid #000;
? padding-bottom:5px;
}
.t{
? display:none;
}
.a{
? display:block;
}
p{
? padding-top:3px;
? line-height:20px;
}
em{
? text-align:right;
? padding-top:2px;
}
h4{
? padding-top:5px;
}
</style>
</head>
<body>
<div id="out_div">
? <h3>大标题</h3>
? <ul>
???? <li>
???? <h4>1标题</h4>
??<p class="a">内容内容内容内容内容内容内容内容</p>
??<em class="a">下标小标</em>
? </li>
? <li>
???? <h4>2标题</h4>
??<p class="t">内容内容内容内容内容内容内容内容</p>
??<em class="t">下标小标</em>
? </li>
? <li>
???? <h4>3标题</h4>
??<p class="t">内容内容内容内容内容内容内容内容</p>
??<em class="t">下标小标</em>
? </li>
? <li>
???? <h4>4标题</h4>
??<p class="t">内容内容内容内容内容内容内容内容</p>
??<em class="t">下标小标</em>
? </li>
? <li style="border-bottom:none">
???? <h4>5标题</h4>
??<p class="t">内容内容内容内容内容内容内容内容</p>
??<em class="t">下标小标</em>
? </li>
? </ul>
</div>
<script type="text/javascript">
/*
* 方法1
* 常见鼠标移入隐藏内容显示效果；
* ****made by keimon *******
* ******2013-01-17********
*/
$(function(){
?? var len = $('li').length;
?? for(var i=0; i<len; i++){
????? $('li').eq(i).hover(function(){
????? var that = $(this);
?? $('p').add($('em')).removeClass('a').addClass('t');
?? that.find('p').add(that.find('em')).addClass('a');
?? })
?? }
})
//方法2
/*
$(function(){
?? var len = $('li').length;
?? for(var i=0; i<len; i++){
????? $('li').eq(i).hover(function(){
????? var that = $(this);
?? var index = $('li').index(that);
?? var $p = that.siblings('li').find('p');
?? var $em = that.siblings('li').find('em');
?? $p.add($em).removeClass('a').addClass('t');
?? that.find('p').add(that.find('em')).addClass('a');
?? })
?? }
})
*/
</script>
</body>
</html>
