Jquery 隐藏/显示导航

我有一个项目，我从一年前我在课堂上做的一个实验室借了一些JavaScript，我有点生疏了，所以我不明白为什么它不能正常工作。我制作了一个示例站点，以便您可以看到它是如何不起作用的。它位于，示例文件可在下载

我需要它设置，这样当你第一次导航到该网站时，就不会有来自“主”分区的内容显示。这允许我将在后台进行的幻灯片放映成为主要焦点。一旦你点击了一个链接，它应该会显示相应的内容从相关的div幻灯片上方。（我把示例中所有的幻灯片内容都保留了下来，因为这是不必要的。）我遇到的问题是，一旦你点击一个链接，你就必须刷新页面才能真正看到内容。为什么呢？我希望不必刷新页面，这样幻灯片就可以一直在后台继续播放。有什么建议吗

下面是如何设置HTML结构

<nav id="hide-show-nav">
    <a href="#about">About</a> |
    <a href="#gallery">Gallery</a> |
    <a href="#contact">Contact</a>
</nav>

<div id="main">

    <div id="about">
        <p>This is the about section.</p>
    </div> <!-- #about -->

    <div id="gallery">
        <p>This is the gallery section.</p>
    </div> <!-- #gallery -->

    <div id="contact">
        <p>This is the contact section.</p>
    </div> <!-- #contact -->

</div> <!-- #main -->

---

您的128行javascript将在jQuery中显示以下内容：

$(function() {
    $("#hide-show-nav​​​ a​").on('click', function(e) {
        e.preventDefault();
        $($(this).attr('href'), '#main').show().siblings().hide();
    })​​;​
})​​;​

没有id为“nav”的元素。我想应该是“隐藏显示导航”。检查一下。像这样的

//get reference to nav
    var nav = document.getElementById('hide-show-nav');

---

您是否尝试过jQuery，它对这种情况非常有用？ 我在你的JS代码中看到，你的生活变得非常复杂，这可以用5行代码编写：

$('body').on('click','#hide-show-nav a', function(e) {
    //hide all children div inside your main container
    $('#main').children().addClass('hide');
    //show only the one clicked
    $($(this).attr('href')).removeClass('hide');
    //prevent the default behaviour of the anchor
    e.preventDefault();
});

---

如果你想在主目录中默认显示一个特殊的div，那么就把你的“hide”类放在其他的div上。

我不久前终于弄明白了这一点，我想我会把我所做的事情公布出来，以防其他人看到

$(function() {
    $('#main').addClass('hide');
});

$('body').on('click','nav a', function(e) {
    $('#main').removeClass('hide');
    $('#main').children().addClass('hide');
    $($(this).attr('href')).removeClass('hide');
    e.preventDefault();
});

---

希望这能有所帮助。

+1，我正准备回答同样的问题@blahblahAMYblah-如果您使用的是jQuery，请去掉

addEvent

和

addLoadEvent

；您正精确地使用jQuery，因此不必使用类似的函数。还有，去找萤火虫！nav id与您在getelementsbyid（“nav”）中调用的不同，谢谢。我已经解决了，但仍然没有解决问题。好吧，我已经解决了，但似乎没有解决问题。谢谢你的关注。这太完美了！当你第一次打开页面时，我怎么能告诉它隐藏所有的div呢？它现在可以切换div，但是当它第一次打开时，所有的div都会在我不想要它们的时候显示出来。只需在每个divsBtw上添加一个“hide”类，我自己并没有弄明白这一点。我不得不用不同的方式发布我的问题，这就是我得到答案的时候。这是我的答案来源的帖子的链接。

//get reference to nav
    var nav = document.getElementById('hide-show-nav');

$('body').on('click','#hide-show-nav a', function(e) {
    //hide all children div inside your main container
    $('#main').children().addClass('hide');
    //show only the one clicked
    $($(this).attr('href')).removeClass('hide');
    //prevent the default behaviour of the anchor
    e.preventDefault();
});

$(function() {
    $('#main').addClass('hide');
});

$('body').on('click','nav a', function(e) {
    $('#main').removeClass('hide');
    $('#main').children().addClass('hide');
    $($(this).attr('href')).removeClass('hide');
    e.preventDefault();
});