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

的粘贴框

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

此解决方案假定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元素。

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

不确定.wrapper的作用，因为它不在您的HTML中。

Answer 3

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

这是一个通用的解决方案，考虑到你可以拥有任何类“someItemNav”的菜单项;如果点击它，任何项目都被隐藏，只显示“someItem”。

Answer 4

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

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

4 个答案: