2012-08-28 210 views
-2

我有一個項目,我借用了一年前在課堂上做過的一些實驗的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; 
} 
+0

nav id與您在getelementsbyid('nav')中調用的內容不同 – Ashirvad

+0

謝謝。我解決了這個問題,但仍然沒有解決問題。 – blahblahAMYblah

回答

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

希望有所幫助。

+0

順便說一句,我沒有自己弄清楚這一點。我必須以不同的方式發佈我的問題,那是我得到答案的時候。這裏是我的答案來自的帖子的鏈接。 http://stackoverflow.com/questions/12168914/hide-div-until-link-is-selected – blahblahAMYblah

2

您的128行javascript會在jQuery中使用這樣的代碼:

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

FIDDLE

+0

+1,我正準備回答同樣的問題。 @blahblahAMYblah - 如果您使用的是jQuery,請去除'addEvent'和'addLoadEvent';你正在使用jQuery,所以你不必使用這些功能。另外,得到Firebug! –

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

有ID爲 '導航' 沒有元素。我認爲它應該是'hide-show-nav'。檢查一次。像這樣的東西..

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

好的,我解決了這個問題,但似乎沒有解決問題。謝謝你抓住那個。 – blahblahAMYblah

0

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

+0

這是完美的!我怎麼能告訴它,當你第一次打開頁面時隱藏所有div?它現在可以在切換div的時候使用,但是當它第一次打開時,它們都會顯示我什麼時候都不需要。 – blahblahAMYblah

+0

只需在每個div上添加一個「隱藏」類 – greg