javascript - Showing content based on a nav link clicked - Stack Overflow

admin管理员组

文章数量:1296484

I have a menu selection that looks like this:

<ul class = "menu">
    <li><a href="#about" class="aboutNav">About</a></li>
    <li><a href="#contact" class="contactNav">Contact</a></li>
    <li><a href="#misc" class="miscNav">Misc</a></li>
</ul>

I'm trying to make content associated with each of these links show on click and hide all other content. The JS I'm using looks as follows:

$('.menu li .aboutNav').click(function (e) {
   e.preventDefault();
   $('.wrapper').hide();
   $('.misc').hide();
   $('.contact').hide();
   $('.about').show();});

I want to have a function like this for each menu element, but currently it isn't working for all the elements in the menu. I've looked at other threads with the same problem I'm having but none of them seem to directly apply to the way I'm doing it.

I just started learning html, js, css so I could be going about this the wrong way and that's why the other threads haven't really helped.

EDIT: Here's a pastebin of all of my HTML

I have a menu selection that looks like this:

<ul class = "menu">
    <li><a href="#about" class="aboutNav">About</a></li>
    <li><a href="#contact" class="contactNav">Contact</a></li>
    <li><a href="#misc" class="miscNav">Misc</a></li>
</ul>

I'm trying to make content associated with each of these links show on click and hide all other content. The JS I'm using looks as follows:

$('.menu li .aboutNav').click(function (e) {
   e.preventDefault();
   $('.wrapper').hide();
   $('.misc').hide();
   $('.contact').hide();
   $('.about').show();});

I want to have a function like this for each menu element, but currently it isn't working for all the elements in the menu. I've looked at other threads with the same problem I'm having but none of them seem to directly apply to the way I'm doing it.

I just started learning html, js, css so I could be going about this the wrong way and that's why the other threads haven't really helped.

EDIT: Here's a pastebin of all of my HTML http://pastebin./FjcNXGkY

• javascript
• html
• navbar

Share Improve this question Follow edited Jul 9, 2015 at 19:07 TheOneTrueSign asked Jul 9, 2015 at 18:51 TheOneTrueSignTheOneTrueSign 14911 gold badge22 silver badges1313 bronze badges 2

• 2 It can be much more helpful if you use jsfiddle to share code like this: jsfiddle/3Lz18sgp – Jason Sperske Commented Jul 9, 2015 at 19:17
• Please don't put your code in a pastebin. Put it here, and narrow it down to the relevant parts. – user1106925 Commented Jul 10, 2015 at 16:03

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

A more efficient way would be to add the same class to all links and another class to all content items...

HTML:

<ul class="menu">
  <li><a href="#about" class="menu-btn">About</a></li>
  <li><a href="#contact" class="menu-btn">Contact</a></li>
  <li><a href="#misc" class="menu-btn">Misc</a></li>
</ul>

<div class="menu-content about">About</div>
<div class="menu-content contact">Contact</div>
<div class="menu-content misc">Misc</div>

JavaScript:

var $content = $('.menu-content');

function showContent(type) {
  // this assumes that you really must select
  // the content using a class and not an ID (which you've 
  // referenced in the href)
  $content.hide().filter('.' + type).show();
}

$('.menu').on('click', '.menu-btn', function(e) {
  // get the type to pass to showContent by grabbing
  // the hash from the anchor href and removing the first
  // character (the #)
  showContent(e.currentTarget.hash.slice(1));
  e.preventDefault();
}); 

// show 'about' content only on page load (if you want)
showContent('about');

Demo on jsbin: http://jsbin./hagonesuwo/edit?html,js,output

------------------------------------- EDIT -------------------------------------

I have just seen your edit with a link to your pastebin. If there is only one content item for each nav item then you can use IDs instead...

HTML:

<ul class="menu">
  <li><a href="#about" class="menu-btn">About</a></li>
  <li><a href="#contact" class="menu-btn">Contact</a></li>
  <li><a href="#misc" class="menu-btn">Misc</a></li>
</ul>

<div id="about" class="menu-content">About</div>
<div id="contact" class="menu-content">Contact</div>
<div id="misc" class="menu-content">Misc</div>

JavaScript:

var $content = $('.menu-content');

function showContent(selector) {
  $content.hide();
  $(selector).show();
}

$('.menu').on('click', '.menu-btn', function(e) {
  showContent(e.currentTarget.hash);
  e.preventDefault();
}); 

// show '#about' content only on page load (if you want)
showContent('#about');

This would be much better as it would mean the navigation would still jump to the relevant content if JS was disabled or failed to download for any reason.

This solution assumes that the a elements will only have a single class.

$('.menu li a').click(function (e) {
    e.preventDefault();
    $(".wrapper,.misc,.content,.about").hide(); // Hide all.
    $("." + this.className.slice(0,-3)).show(); // Show one based on the class
});

It binds the same handler to all the a elements.

When clicked, it hides all the targeted elements, and then slices away the "Nav" from the .className to create a selector to choose the one to display.

Not sure what .wrapper does, since it's not in your HTML.

You have a couple of problems with your JS:

• you select items by class .misc instead of ID #misc

• the way you coded the click is very rigid. Make it more elastic like:

  $('.menu').on('click', 'li', function (e) {
      $('article').hide();
      var id = $(this).find('a').attr('href'); // $(this) is the clicked LI
      $(id).show();    
  })
  

I assume all items with IDs #about, #contact etc. are simply article HTML elements and I hide them all before showing the right one. Hope this helps.

EDIT

Or even a bit more elegant hiding the other contents:

$('.menu').on('click', 'li', function (e) {
    var id = $(this).find('a').attr('href');
    $(id).show().siblings().hide();    
})

$(".menu").children().click(function(){
    $(".menu").children(function(){
        $("."+$(this).attr("class").replace("Nav","")).hide();
    })
    $("."+$(this).attr("class").replace("Nav","")).show();
})

This would be a universal solution, considering that you can have any menu item with class "someItemNav"; if it's clicked any items are hidden and only "someItem" is shown.

本文标签： javascriptShowing content based on a nav link clickedStack Overflow