0

我正在使用基于以下 jsfiddle 的代码在我的网页上显示/隐藏 div：http: //jsfiddle.net/XwN2L/420/

它适用于我页面的一部分，在第一个导航栏中。我需要考虑另外两个导航栏，它们使用相同的代码。例子...

    $('.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 回答