我有一個項目,我借用了一年前在課堂上做過的一些實驗的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;
}
nav id與您在getelementsbyid('nav')中調用的內容不同 – Ashirvad
謝謝。我解決了這個問題,但仍然沒有解決問題。 – blahblahAMYblah