Jquery使用3个不同的导航栏显示/隐藏多个div

我使用基于以下JSFIDLE的代码在我的网页上显示/隐藏div：

它在我的页面的一部分，在第一个导航栏中工作。我还需要解释另外两个导航栏，它们使用相同的代码。例如

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

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

及

---

等等。。。有关更详细的列表，请访问www.rcgraphicsstudio.com/ecryo。您会注意到页眉和页脚都固定在顶部和底部，所以我希望这不是导致问题的原因

You#div5到11个元素实际上嵌套在You#div4元素中。因此，当您单击链接“target=5”时，您会隐藏要显示的div的父元素。

我访问了您的站点，问题似乎是每个subnav元素都包含在

#div4

中，因此如果

$（this.data（'target'））>4

您需要同时显示

#div4

和

$（'div'+$）.data）（'target'））

在给定页面上（www.rcgraphicsstudio.com/ecryo）jQuery很好。你的问题是你的div5到div14都在DOM的div4中。div1到div4在同一个级别上，然后你将其余的嵌套在4中。解决了这个问题，你的页面就会工作得很好。

谢谢！你们所有人都给出了基本相同的答案，这很有效。你们都很棒。

<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>