当我显示不同的部分时如何隐藏一个部分？

Question

基本上，我希望首先将一个部分显示为主页。当我单击一个链接时，我希望显示该部分，但隐藏其他所有内容，依此类推。每次点击链接时，我只想显示点击链接的部分。

我很接近，但卡住了。这是我的 HTML：

<a href="#about" id="about" class="text-center" title="">About Me</a>                   
<a href="#contact" id="contact" class="text-center" title="">Contact</a>

<div class="container-fluid">
    <div class="container about showing">
        <h2>About Me</h2>
    </div>
</div>

<div class="container-fluid">
    <div class="container about showing">
        <h2>Contact</h2>
    </div>
</div>

这是我的脚本：

$(document).ready(function() {

$('.about').hide();
$('.contact').hide();

$('.showing').show();

$('#contact').on('click', function(e) {
    e.preventDefault();
    $('div').removeClass('showing');
    $('.contact').addClass('showing');
    if ($('div').hasClass('showing')) {
        $('div').show();
    } else {
        $('div').hide();
    }
});

});

所以它会立即显示“关于我”部分，而其他所有内容都被隐藏了。当我单击“联系人”链接时，它会从我的所有“div”中删除“显示”类，并将“显示”类添加到我的联系人部分。然后我检查'div'是否有'showing'类，如果有，我会显示'div'，否则我希望它隐藏它。

但是，当我单击“联系人”链接时，它会显示“联系人”部分，但不会隐藏“关于我”部分。我知道这是一篇很长的帖子，我只是想确保我正确解释了所有内容。非常感谢任何帮助！

Answer 1

我强烈建议您使用数据字段和通用类来使其具有通用性。

var $pages = $('.container');

$('.menu').on('click', function(e){
  //remove showing from all containers
  $pages.removeClass('showing');
  //put it on the container with the matching class of the data target
  $pages.filter('.'+ $(e.target).data('target')).addClass('showing');
});

.container {
  display: none;
}

.container.showing {
  display: unset;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#about" class="menu text-center" data-target="about" title="">About Me</a>
<a href="#contact" class="menu text-center" data-target="contact" title="">Contact</a>
<a href="#other" class="menu text-center" data-target="other" title="">Other</a>


<div class="container-fluid">
  <div class="container home showing">
    <h2>Home</h2>
  </div>
</div>

<div class="container-fluid">
  <div class="container about">
    <h2>About Me</h2>
  </div>
</div>

<div class="container-fluid">
  <div class="container contact">
    <h2>Contact</h2>
  </div>
</div>

<div class="container-fluid">
  <div class="container other">
    <h2>Other</h2>
  </div>
</div>

Answer 2

您可以优化以下几点：

       $(document).ready(function() {
        $('.about, .contact').hide(); //put both of them in single selector
        $('.showing').show(); //this shows the only element that has "showing
    
        $('#contact, #about').on('click', function(e) {
            e.preventDefault();
    
            var self = $(this); //reference to the object being clicked
            var target = $("." + self.attr('id'));
    
            //removes "showing" class from all others and hides them
            $(".container").not(target).removeClass("showing").hide();
    
            //adds "showing" class to the new current item
            target.addClass("showing").show();
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#about" id="about" class="text-center" title="">About Me</a>                   
    <a href="#contact" id="contact" class="text-center" title="">Contact</a>
    
    <div class="container-fluid">
        <div class="container about showing">
            <h2>About Me</h2>
        </div>
    </div>
    
    <div class="container-fluid">
        <div class="container contact"> <!--you don't want that "showing" class here!-->
            <h2>Contact</h2>
        </div>
    </div>