隱藏/顯示導航

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特殊默認顯示，然後把你的「隱藏」課放在其他的課上。