显示其他部分时如何隐藏部分？

Question

Basically I want one section to be shown at first as the home page. When I click on a link, I want that section to be shown, but everything else hidden, and so on. Every time I click a link, I only want the clicked on link's section to be shown.

I am close, but stuck. Here is my 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>

And here is my script:

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

});

So it shows the 'About Me' section right away and everything else is hidden. When I click the 'Contact' link it removes the 'showing' class from all my 'div's and adds the 'showing' class to my contact section. I then check to see if the 'div' has the 'showing' class, if it does I have it show the 'div' otherwise I want it to hide it.

However, when I click on the Contact link, it does show the Contact section, but it does not hide the About Me section. I know this is a long post, I am just trying to make sure I explain everything correctly. Any help is greatly appreciated!

Answer 1

I would strongly suggest you use data fields and common classes to make it generic.

 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

Here's a few things you can optimize:

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