jquery在div之间切换并随后隐藏活动div

问题描述：

在我问的一个类似问题上发挥了很好的回答。jquery在div之间切换并随后隐藏活动div

三个div，全部隐藏。 jquery通过不同的链接在它们之间切换。这很好用！现在，我想要粘贴对应于活动div的链接并将其隐藏起来，实际上与隐藏所有页面时页面加载时一样。现在它淡出并返回。

帮助！谢谢！

HTML：

<div id="nav"> 
    <a class="home" id="show_about" title="About">ABOUT</a><br /> 
    <a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br /> 
    <a class="home" id="show_contact" title="Contact">CONTACT</a> 
</div> 
<div id="content"> 
    <div class="current" id="about"> 
     <p>ABOUT's content</p> 
    </div> 
    <div id="subscribe"> 
     <p>SUBSCRIBE's content</p> 
    </div> 
    <div id="contact"> 
     <p>CONTACT's content</p> 
    </div> 
</div>

的Javascript：

$(function(){ 
     $('#about').css('display', 'none'); 
     $('#subscribe').css('display', 'none'); 
     $('#contact').css('display', 'none'); 
    }); 
    $('.home').click(function(){ 
     var id = $(this).html().toLowerCase(); 
     $('.current').fadeOut(600, function(){ 
      $('#'+id).fadeIn(600); 
      $('.current').removeClass('current'); 
      $('#'+id).addClass('current');  
     }); 
    });

答

尝试了这一点..

由于上淡出当前类被去除，如果电流的大小为0意味着没有被选中。我们可以简单地淡入内容div。

$('#about, #subscribe, #contact').hide(); 

$('.home').click(function() { 
    var id = $(this).html().toLowerCase(); 
    var $content = $('#' + id + ':not(:visible)'); 
    if ($('.current').length === 0) { 
     showContent($content) 
    } 
    else { 
     $('.current').fadeOut(600, function(){showContent($content)}); 
    } 
}); 

function showContent(content) { 
    content.fadeIn(600); 
    $('.current').removeClass('current'); 
    content.addClass('current'); 
}

jsfiddle上的示例。

@Mark 我想我应该添加一个小浮动X按钮来关闭窗口。最好把这个功能加入到这个功能中，或者另一个呢？ #close是ID – technopeasant 2011-02-27 19:59:07

所以你想添加一个关闭链接的内容div？我会把它变成一个不同的功能。由于现在主页点击正在处理您的菜单/内容显示。如果你在一个关闭函数中工作，它可能会导致一个可能做得很好的方法。 – 2011-02-27 20:14:26

@好极了，谢谢你的指导。如果我理解你的功能正确..它将移动class =“current”到显示的div。我可以做一个简单的点击功能，淡出class =“current”div吗？ – technopeasant 2011-02-27 20:26:57

答

检查，看是否点击的元素的ID等于当前显示的元素的ID（即与元素目前类）。如果它是一个不同的元素，则需要进行交换。如果是相同的元素，那么它需要被隐藏，有其当前类中删除...

（编辑：固定码）

HTML：

<div id="nav"> 
    <a class="home" id="show_about" title="About">ABOUT</a><br /> 
    <a class="home" id="show_subscribe" title="Subscribe">SUBSCRIBE</a><br /> 
    <a class="home" id="show_contact" title="Contact">CONTACT</a> 
</div> 
<br /> 
<br /> 
<br /> 
<div id="content"> 
    <div id="about"> 
     <p>ABOUT's content</p> 
    </div> 
    <div id="subscribe"> 
     <p>SUBSCRIBE's content</p> 
    </div> 
    <div id="contact"> 
     <p>CONTACT's content</p> 
    </div> 
    <div class="current" id="dummy"></div> 
</div>

JS：

$().ready(function() 
{ 
     $('#about').hide(); 
     $('#subscribe').hide(); 
     $('#contact').hide(); 
     $('#dummy').hide(); 


    $('.home').click(function() { 
    var id = $(this).html().toLowerCase(); 

     if ($('.current').length >0) { 
     if($('.current')[0].id.toLowerCase() != id) 
     { 
      $('.current').hide(); 
      $('.current').removeClass('current'); 
      $('#'+id).addClass('current');  
      $('#'+id).show(); 
     } 
     else 
     { 
      $('.current').hide(); 
      $('.current').removeClass('current'); 
      $('#dummy').addClass('current'); 
     } 
     } 
    }); 
});

只需用淡入和淡出替换.hide（）和.shows（）。

@迈克尔，只是我们可以使用jQuery” .hide隐藏，而不是显示没有.. – kobe 2011-02-26 20:35:36

这是从OP的代码复制，现在删除，因为建议它不是需要调整以解决问题的功能的一部分。虽然有效的点。 – TimFoolery 2011-02-26 20:38:47

@Michael多数民众赞成酷...没有probs – kobe 2011-02-26 20:40:09

答

这里是另一种方法：

$(function(){ 
     $('#content div').hide(); 
    }); 

    $('.home').click(function(){ 
     var targetSelector = '#' + $(this).attr('title').toLowerCase(); 
     var targetShown = $(targetSelector).is(':visible'); 

     if (targetShown) { 
      $(targetSelector).fadeOut(600); 
     } else { 
      $('#content div:not(' + targetSelector + ')').fadeOut(600, 
             function() {$(targetSelector).fadeIn(600)}); 
     } 
    });

jquery在div之间切换并随后隐藏活动div

相关推荐