隐藏/显示导航

Question

我有一个项目，一年前在课堂上从实验室借了一些JavaScript，我有点生疏，所以我不明白为什么它不能正常工作。我做了一个示例网站，这样你就可以看到它是如何不起作用的。它位于amykate.com/test，示例文件可以在amykatecom/test.zip下载。

我需要设置它，这样当你第一次导航到网站时，"主"分区就不会显示任何内容。这允许我在后台进行的幻灯片放映成为主要焦点。不过，一旦你点击了一个链接，它应该会显示幻灯片相关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 -->

JavaScript是这样的。。。

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
function addEvent(element, type, handler)
{
    if (element.addEventListener)
        element.addEventListener(type, handler, false);
    else
    {
        if (!handler.$$guid) handler.$$guid = addEvent.guid++;
        if (!element.events) element.events = {};
        var handlers = element.events[type];
        if (!handlers)
        {
            handlers = element.events[type] = {};
            if (element['on' + type]) handlers[0] = element['on' + type];
            element['on' + type] = handleEvent;
        }
        handlers[handler.$$guid] = handler;
    }
}
addEvent.guid = 1;
addLoadEvent(init);

function init()
{
    findDest();
    //get reference to container element
    var holder = document.getElementById('main');
    //create ref to all divs inside of main
    var divs = holder.getElementsByTagName('DIV');
    var l = divs.length;
    //get reference to nav
    var nav = document.getElementById('hide-show-nav');
    //create ref to all links in nav
    var links = nav.getElementsByTagName('A');
    var numLinks = links.length;
    //loop over links add event listeners
    for(var j=0; j < numLinks; j++)
    {
        addEvent(links[j], 'click', showDiv);   
        addEvent(links[j], 'click', setStatus); 
    }
}

function showDiv(evt)
{
    //get reference to container element
    var holder = document.getElementById('main');
    //create ref to all divs inside of main
    var divs = holder.getElementsByTagName('DIV');
    var l = divs.length;
    //loop over divs and hide them all
    for(var i = 0; i < l; i++)
    {
        divs[i].className = 'hide'; 
    }
    //get reference to link click on
    var target = evt.target || window.event.srcElement;
    var destination = target.href;
    var divName = destination.split('#')[1];
    document.getElementById(divName).className = 'show';
}
function findDest()
{
    //get reference to container element
    var holder = document.getElementById('main');
    //create ref to all divs inside of main
    var divs = holder.getElementsByTagName('DIV');
    var l = divs.length;
    //loop over divs and hide them all
    for(var i = 0; i < l; i++)
    {
        divs[i].className = 'hide'; 
    }
    //get reference to link click on
    var destName = window.location.toString();
    var loc = destName.split('#')[1];   
    document.getElementById(loc).className = 'show';
}
function setStatus(evt)
{
    //get reference to link click on
    var target = evt.target || window.event.srcElement;
    //get reference to nav
    var nav = document.getElementById('hide-show-nav');
    //create ref to all links in nav
    var links = nav.getElementsByTagName('A');
    var numLinks = links.length;
    //loop over links add event listeners
    for(var j=0; j < numLinks; j++)
    {
        changeClassName('remove', links[j], 'statusOn');
    }
    //add status indication to link
    changeClassName('add', target, 'statusOn');
}

还有这个CSS。。。

.hide {
    display:none;
}
.show {
    display:block;
}

Answer 1

您的128行javascript在jQuery:中是这样的

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

FIDDLE

Answer 2

我不久前终于弄清楚了这一点，并想如果其他人发现这一点的话，我会发布我所做的。

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

希望能有所帮助。

Answer 3

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

没有id为"nav"的元素。我觉得应该是"隐藏显示导航"。检查一次。像这样的。。

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

Answer 4

您是否尝试过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();
});

如果您希望在您的main中默认显示一个特殊的div，那么将您的"hide"类放在其他div上。