当我显示不同的部分时,如何隐藏部分?

时间:2018-02-26 19:27:54

标签: javascript jquery html

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

我很接近,但卡住了。这是我的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;否则我希望它隐藏它。

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

2 个答案:

答案 0 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:0)

以下是您可以优化的一些内容:

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