jquery切换内容效果
案例一：
<style>
.sh{display:none;}
a:focus { outline:none;-moz-outline:none;}
.mouseover_word{ font-weight:bold; display:block;}
</style>
<script type=”text/javascript” src=”js/jquery.js”></script>
<script>
$(function(){
$(‘#menu1 a:first’).addClass(‘mouseover_word’); //默认第一个
$(‘#menu1 a’).click(function(){
$(‘#menu1 a’).removeClass(‘mouseover_word’); //删除所有的
$(this).addClass(‘mouseover_word’); // 只留一个
})
$(‘#box .sh:first’).css({display:’block’});
$(‘#menu1 li’).click(function(){
var index=$(‘#menu1 li’).index(this);
$(‘#box .sh’).each(function(i){
if(i==index){
$(‘#box .sh’).eq(i).css({display:’block’});
}else{
$(‘#box .sh’).eq(i).css({display:’none’});
}
})
})
})
</script>
<div class=”buy”>
<ul id=”menu1″>
<li ><a href=”#” hidefocus=”true”>加盟推荐购卡</a></li>
<li ><a href=”#” hidefocus=”true”>个人使用购卡</a></li>
</ul>
</div>
<div id=”box”>
<div class=”sh”>1111</div>
<div class=”sh”>2222</div>
</div>
案例二：
<style>
//此样式适用于案例三、案例四
.main
{
width:810px;
margin:0 auto;
height:auto;
margin-top:8px;
}
#email_nav
{
width:806px;
float:left;
}
#menu
{
margin:0;
padding:0;
list-style:none;
}
#menu li
{
float:left;
width:100px;
text-indent:16px;
font-size:14px;
line-height:25px;
}
</style>
<script>
$(function(){
$(‘#menu li’).click(function(){
var index=$(‘#menu li’).index(this);
if(index==0){
$(‘#content0′).show();
$(‘#content1′).hide();
$(‘#content2′).hide();
}
if(index==1){
$(‘#content1′).show();
$(‘#content0′).hide();
$(‘#content2′).hide();
}
if(index==2){
$(‘#content2′).show();
$(‘#content1′).hide();
$(‘#content0′).hide();
}
})
})
</script>
<div class=”main”>
<div id=”email_nav”>
<ul id=”menu”>
<li><a href=”#”>回复</a></li>
<li><a href=”#”>回复所有人</a></li>
<li><a href=”#”>转发</a></li>
</ul>
</div>
<!–内容显示区域–>
<div id=”main”>
<div id=”content0″ style=”display:none;”><div>内容一</div></div>
<div id=”content1″ style=”display:none;”><div>内容二</div></div>
<div id=”content2″ style=”display:none;”><div>内容三</div></div>
</div>
<!–内容显示区域–>
</div>
案例三：
<script>
$(function(){
//$(‘#menu a’).css({display:’block’});
$(‘#menu li’).click(function(){
var index=$(‘#menu li’).index(this);
$(‘#main div’).each(function(i){
if(i==index){
$(‘#main div’).eq(i).css({display:’block’});
}else{
$(‘#main div’).eq(i).css({display:’none’});
}
})
})
})
</script>
<div class=”main”>
<div id=”email_nav”>
<ul id=”menu”>
<li><a href=”#”>回复</a></li>
<li><a href=”#”>回复所有人</a></li>
<li><a href=”#”>转发</a></li>
</ul>
</div>
<!–内容显示区域–>
<div id=”main”>
<div style=”display:none;”>内容一</div>
<div style=”display:none;”>内容二</div>
<div style=”display:none;”>内容三</div>
</div>
<!–内容显示区域–>
</div>
案例四：
<script>
$(function(){
$(‘#menu li’).click(function(){
var index=$(‘#menu li’).index(this);
if($(‘#content’+index).css(‘display’)==’block’){
$(‘#content’+index).hide();
}else{
$(‘#content’+index).show();
}
})
})
</script>
<div class=”main”>
<div id=”email_nav”>
<ul id=”menu”>
<li><a href=”#”>回复</a></li>
<li><a href=”#”>回复所有人</a></li>
<li><a href=”#”>转发</a></li>
</ul>
</div>
<!–内容显示区域–>
<div id=”main”>
<div id=”content0″ style=”display:none;”><div>内容一</div></div>
<div id=”content1″ style=”display:none;”><div>内容二</div></div>
<div id=”content2″ style=”display:none;”><div>内容三</div></div>
</div>
<!–内容显示区域–>
</div>
http://blog.sina.com.cn/s/blog_6d208b4701016bh1.html