隐藏/显示导航

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

前一阵子我终于弄清楚了这一点，并想知道我会发布一些其他人遇到的问题。

$(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 2

您的128行javascript会在jQuery中使用这样的代码：

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

FIDDLE

Answer 3

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

有ID为 '导航' 没有元素。我认为它应该是'hide-show-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(); 
}); 

，如果你想你的里面一个主要的div特殊默认显示，然后把你的“隐藏”课放在其他的课上。