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

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 http://pastebin.com/FjcNXGkY 的 pastebin

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 因任何原因被禁用或下载失败，导航仍会跳转到相关内容。

Answer 2

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

这将是一个通用的解决方案，考虑到您可以拥有任何具有“someItemNav”类的菜单项；如果单击它，则隐藏任何项目，并且只显示“someItem”。

Answer 3

你的 JS 有几个问题：

• 您按类 .misc 而不是 ID #misc 选择项目

• 您对点击进行编码的方式非常严格。使其更具弹性，例如：

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

我假设所有 ID 为 #about、#contact 等的项目都只是 article HTML 元素，我在显示正确的元素之前将它们全部隐藏起来。希望这会有所帮助。

编辑

或者更优雅地隐藏其他内容：

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

Answer 4

此解决方案假定a 元素只有一个类。

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

它将同一个处理程序绑定到所有a 元素。

单击时，它会隐藏所有目标元素，然后从.className 中切出"Nav" 以创建选择器来选择要显示的元素。

不确定.wrapper 做了什么，因为它不在您的 HTML 中。