Question

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

我需要进行设置，以便当您第一次导航到该网站时，“main”div中不会显示任何内容。这允许我将在后台进行的幻灯片放映成为主要焦点。一旦你点击一个链接，它应该显示幻灯片显示的相关div overop的相应内容。（我将所有幻灯片显示的内容留给了示例，因为它没有必要。）我遇到的问题是，一旦您点击链接，您必须刷新页面才能真正看到内容。这是为什么？我希望能够不必刷新页面，以便幻灯片可以一直在后台继续。有什么建议吗？

以下是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'的元素。我认为它应该是'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，则将“隐藏”类放在其他类上。

隐藏/显示导航

4 个答案: