javascript - 根据 anchor 显示/隐藏内容 - 几乎就在那里

Question

我非常接近，但只是看不到我在 jQuery 中缺少的内容脚本仅根据单击的 anchor 显示正确的内容 block ，并且希望首先向访问者显示 anchor 中的第一个内容 block 。任何帮助表示赞赏。

我动态生成了类 .link 的 anchor 链接。

内容也是动态生成的，每个 anchor (A、B、C...)的内容都包含在 ul 中。类.test-full-list 。任何帮助表示赞赏。

生成的内容:

anchor 链接:

<span class="link"><a href="#A">A</a></span>
<span class="link"><a href="#B">B</a></span> 

内容:

<div class="test-listing-container">
    <ul class="test-full-list">
        <ul class="test-category-list"> 
            <a name="A"></a>
            <div class="anchor-header">- A -</div>
            <li id=test-list> 
                <a href="some link" class="main" title="some title">Some Link 1</a>
                <a href="some link" class="main" title="some title">Some Link 1</a>
            </li>
        </ul>
    </ul>
</div>

脚本:

jQuery(document).ready(function () {
    jQuery('.test-listing-container').hide();

    jQuery('.link a').click(function () {
        var jQuerydiv = jQuery('.test-full-list').eq(jQuery(this).index('.link a'));
        jQuerydiv.show('.test-full-list'); // show the relevant div
    });
});

Answer 1

如果您动态引入内容，您的 .click() 将不起作用。这是因为您尝试将点击附加到的元素尚未生成。

您可以替换它:

jQuery('.link a').click(function() {

这样:

jQuery('.test-listing-container').on('click', '.link a', function() {

如果这不起作用:

jQuery(document).on('click', '.link a', function() {