javascript - 根据点击的导航链接显示内容

Question

我有一个如下所示的菜单选择:

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

我试图让与这些链接中的每一个相关联的内容在点击时显示并隐藏所有其他内容。我使用的 JS 如下所示:

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

我希望每个菜单元素都有这样的功能，但目前它不适用于菜单中的所有元素。我已经查看了其他与我遇到的相同问题的线程，但它们似乎都没有直接适用于我正在做的事情。

我刚开始学习 html、js、css，所以我可能会以错误的方式解决这个问题，这就是为什么其他线程没有真正帮助的原因。

编辑:这是我所有 HTML 的 pastebin http://pastebin.com/FjcNXGkY

Answer 1

一种更有效的方法是为所有链接添加相同的类，为所有内容项添加另一个类...

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

jsbin 上的演示:http://jsbin.com/hagonesuwo/edit?html,js,output

------------------------------------ 编辑 -- ------------------------------------

我刚刚看到您的编辑以及指向您的 pastebin 的链接。如果每个导航项只有一个内容项，那么您可以改用 ID...

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

这会好很多，因为这意味着如果 JS 被禁用或由于任何原因无法下载，导航仍会跳转到相关内容。