根据点击的导航链接显示内容 [英] Showing content based on a nav link clicked

问题描述

我有一个菜单选项，如下所示：

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>

我正在尝试通过点击显示与这些链接相关联的内容并隐藏所有其他内容。我正在使用的JS看起来如下：

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.

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

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.

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

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

推荐答案

更有效的方法是将同一个类添加到所有链接，将另一个类添加到所有内容项目......

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：

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

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

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

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

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

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：

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

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.

这篇关于根据点击的导航链接显示内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！