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

});

所以它显示了关于我＆＃39;部分立即，其他一切都隐藏。当我点击“联系人”时链接它删除＆＃39;显示＆＃39;来自我所有人的课程，并添加＆＃39;显示＆＃39;我的联系部分。然后我检查一下＆＃39; div＆＃39; div有＆＃39;显示＆＃39;课程，如果是的话我会让它显示＆＃39; div＆＃39;否则我希望它隐藏它。

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

Answer 1

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

＆＃13;

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

＆＃13;

.container {
  display: none;
}

.container.showing {
  display: unset;
}

＆＃13;

<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>

＆＃13;

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>

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

2 个答案: