我有一个网站,旁边有6个导航按钮.对于他们中的每一个,我想显示相应的DIV隐藏其他5.页面加载DIV#1可见,其他显示:无.
我知道如何使用hide(),show(),淡入淡出等隐藏和显示元素,但是我试图想出最好的方法来无缝地显示被点击的元素,同时隐藏当前可见的任何一个,而不需要拼写他们全都像:
$('#btn1').click(function(){ $('#div2').hide(); $('#div3').hide(); $('#div1').show(); )}
解决方法
这是jquery代码:
$(document).ready(function() { $('#btn-next').click(function () { $('#recent_post').hide(); $('#top_post').fadeIn(3000).show(); return false; }); $('#btn-prev').click(function () { $('#top_post').hide(); $('#recent_post').fadeIn(3000).show(); return false; }); });
这是html:
<div id="top_post" class="post" style="z-index:1;"> <!---Content goes here---> </div> <div class="post" id="recent_post" style="display:none;z-index:0;"> <!---Content goes here---> </div>
我已经在我的网站上实现了它.请参阅http://kaidul.web44.net/中的“文章”部分我刚刚为两个div建了它.为6 div做同样的工作.希望它有效!