0

次のjsfiddleに基づくコードを使用して、Webページでdivを表示/非表示にしていました: http://jsfiddle.net/XwN2L/420/

私のページの最初のナビゲーションバーの一部で機能します。他に考慮しなければならないナビゲーション バーが 2 つありますが、これらは同じコードを使用しています。例...

    $('.showSingle').on('click', function () {
    /* $(this).addClass('selected').siblings().removeClass('selected'); */
    $('.targetDiv').hide();
    $('#div' + $(this).data('target')).show();
    });

    $('.showSingle').first().click();

と

<div id="headnav">
<ul>
<li><a href ="#" class="showSingle" data-target="1">&bull;&nbsp;HOME</a> </li>
<li><a href ="#" class="showSingle" data-target="2">&bull;&nbsp;ABOUT US</a> </li>
<li><a href ="#" class="showSingle" data-target="3">&bull;&nbsp;CONTACT</a> </li>
<li><a href ="#" class="showSingle" data-target="4">&bull;&nbsp;WHERE TO BUY</a> </li>
</ul>
</div>
<div id="nav">
<ul>
    <li><a href ="#" class="showSingle" data-target="5">&bull;&nbsp;PIPE TOBACCO</a>
        <ul>
            <li><a href ="#" class="showSingle" data-target="6">KENTUCKY SELECT</a></li>
            <li><a href ="#" class="showSingle" data-target="7">BUCKHORN</a></li>
        </ul>
    </li>
    <li><a href ="#" class="showSingle" data-target="8">&bull;&nbsp;ORGANIC TOBACCO</a></li>
    <li><a href ="#" class="showSingle" data-target="9">&bull;&nbsp;CIGARETTE TOBACCO</a></li>
    <li><a href ="#" class="showSingle" data-target="10">&bull;&nbsp;FILTER CIGARS</a></li>
    <li><a href ="#" class="showSingle" data-target="11">&bull;&nbsp;E-CIGARETTES</a></li>
</ul>

など... 詳細なリストについては、www.rcgraphicsstudio.com/ecryo をご覧ください。ヘッダーとフッターの両方が上下に固定されていることに気付くと思いますので、それが問題の原因でないことを願っています。

4

3 に答える 3

0

＃div5から11の要素は、実際には＃div4要素にネストされています。したがって、リンク「target = 5」をクリックすると、表示するdivの親要素が非表示になります。

于 2013-03-15T16:12:35.827 に答える
0

私はあなたのサイトに行きましたが、すべての subnav 要素が含まれているという問題がある#div4よう$(this).data('target')) > 4です。#div4$('#div' + $(this).data('target'))

于 2013-03-15T16:13:17.650 に答える
0

指定されたページ (www.rcgraphicsstudio.com/ecryo) では、jQuery は問題ありません。問題は、div5 から div14 までがすべて DOM の div4 内にあることです。div1 - div4 は同じレベルにあり、残りを 4 内にネストしました。これを修正すると、ページは正常に動作します。

于 2013-03-15T16:15:26.377 に答える