我知道这个jQuery代码的很大一部分是不必要的,特别是在重复fadeOut
和fadeIn
事件时。
<script type='text/javascript'>
$(function(){
$('.panel').hide();
$('.work_button').click(function(){
$('#cms,#contact').fadeOut(function(){
$('#work').fadeIn();
});
});
$('.cms_button').click(function(){
$('#work,#contact').fadeOut(function(){
$('#cms').fadeIn();
});
});
$('.contact_button').click(function(){
$('#cms,#work').fadeOut(function(){
$('#contact').fadeIn();
});
});
$('.home_button').click(function(){
$('.panel:visible').fadeOut();
});
});
</script>
<div class="menu">
<ul class="menu">
<li class="home_button">home</li>
<li class="work_button">work</li>
<li class="cms_button">cms</a></li>
<li class="contact_button">contact</a></li>
</ul>
</div>
<div class="panel" id="work">
<p>...</p>
</div>
<div class="panel" id="cms">
<p>...</p>
</div>
<div class="panel" id="contact">
<p>...</p>
</div>
答案 0 :(得分:1)
我会将具有相同类名的按钮命名为面板ID:
<button class="home">Home</button>
<button class="work">Work</button>
<button class="cms">CMS</button>
<button class="contact">Contact</button>
<div class="panel" id="home">
<p>..Home..</p>
</div>
<div class="panel" id="work">
<p>..work..</p>
</div>
<div class="panel" id="cms">
<p>..cms..</p>
</div>
<div class="panel" id="contact">
<p>..contact..</p>
</div>
然后您可以简化脚本(demo):
$(function() {
$('.panel').hide();
$('button').click(function(){
var tar = $(this).attr('class'); // replace "_button" if there
$('.panel').fadeOut(function(){
$('#' + tar).fadeIn();
});
});
});
如果被问及如何使菜单工作,我会this:
$(function() {
$('.panel:not(#home)').hide();
$('.menu li').click(function() {
var tar = '#' + $(this).attr('class').replace("_button",'');
$('.panel:not(' + tar + ')').fadeOut();
$(tar).fadeIn();
});
});
答案 1 :(得分:0)
$(function(){
$('.panel').hide();
$('.work_button,.cms_button,.home_button').click(function(){
var thiss=$(this);
$('.panel').fadeOut(function(){
thiss.fadeIn();
});
});
$('.home_button').click(function(){
$('.panel:visible').fadeOut();
});
});
答案 2 :(得分:0)
<script type='text/javascript'>
$(function(){
$('.panel').hide();
$('.work_button').click(function(){
FadeOutIn($('#cms,#contact'), $('#work'));
});
$('.cms_button').click(function(){
FadeOutIn($('#work,#contact'), $('#cms'));
});
$('.contact_button').click(function(){
FadeOutIn($('#cms,#work'), $('#contact'));
});
$('.home_button').click(function(){
FadeOutIn($('.panel:visible'), null));
});
});
function FadeOutIn(fadeOutElements, fadeInElements) {
fadeOutElements.fadeOut(function(){
fadeInElements.fadeIn();
});
}
</script>
答案 3 :(得分:-1)
使用jQuery UI,这将让生活更轻松!
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#panels').accordion();
});
</script>
<div id="#panels">
<h3><a href="#">Work</a></h3>
<div class="panel" id="work">
<p>...</p>
</div>
<h3><a href="#">CMS</a></h3>
<div class="panel" id="cms">
<p>...</p>
</div>
<h3><a href="#">Contact</a></h3>
<div class="panel" id="contact">
<p>...</p>
</div>
</div>