Question

关于我提出的一个类似问题的戏剧，这个问题得到了慷慨解答。

三个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');     
        });   
    });

Answer 1

试试这个..

因为在fadeOut上删除了当前类，如果当前的大小为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上的示例。

Answer 2

这是另一种方法：

$(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)});
        }
    });

Answer 3

检查被点击元素的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在div之间切换，然后隐藏活动div

3 个答案: