隐藏/显示导航

Question

我有一个项目，我从一年前在课堂上做的实验室借了一些 JavaScript，我有点生疏，所以我不知道为什么它不能正常工作。我制作了一个示例网站，以便您了解它是如何工作的。它位于amykate.com/test，示例文件可以在amykate.com/test.zip下载。

我需要设置它，以便当您第一次导航到该站点时，“主”div 中不会显示任何内容。这使得我将在后台播放的幻灯片成为主要焦点。但是，一旦您单击链接，它应该会从幻灯片的相关 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，则将“隐藏”类放在其他类上。