jquery - ナビゲーションの非表示/表示

Question

1年前にクラスで行ったラボから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;
}

score 2 · Accepted Answer

あなたの 128 行の JavaScript は、 jQuery で次のようになります。

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

フィドル

score 1 · Accepted Answer

私はついにこれを少し前に理解し、他の誰かがこれに出くわした場合に備えて、私がしたことを投稿すると考えました.

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

それが役立つことを願っています。

score 0 · Accepted Answer

//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');

score 0 · Accepted Answer

そんなときに便利な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が必要な場合は、「非表示」クラスを他のクラスに配置します。

jquery - ナビゲーションの非表示/表示

4 に答える 4

Related

Reference