Question

我有以下代码，

    <ul class="topindex">
    <li><h4><a title="A folder" href="#A-folder" rel="nofollow" class="index-letters">A</a></h4></li>
    <li><h4><a title="B folder" href="#B-folder" rel="nofollow" class="index-letters">B</a></h4></li>
    <li><h4><a title="C folder" href="#C-folder" rel="nofollow" class="index-letters">C</a></h4></li>
    <li><h4><a title="D folder" href="#D-folder" rel="nofollow" class="index-letters">D</a></h4></li>
    </ul>

    <ul class="index-list">
    <li><a name="A-folder" id="A-folder"></a>
    <h5><a title="Back to index" href="#tags_top" rel="nofollow">A</a></h5>

    <ul class="links">
    <li class="cat-item"><a href="http://www.related.link" title="A" rel="nofollow">A text</a></li>
    </ul>
    </li>
    <li><a name="B-folder" id="B-folder"></a>
    <h5><a title="Back to index" href="#tags_top" rel="nofollow">B</a></h5>

    <ul class="links">
    <li class="cat-item"><a href="http://www.related.link" title="B" rel="nofollow">B text</a></li>
    </ul>
    </li>
    <li><a name="C-folder" id="C-folder"></a>
    <h5><a title="Back to index" href="#tags_top" rel="nofollow">C</a></h5>
    <ul class="links">
    <li class="cat-item"><a href="http://www.related.link" title="C" rel="nofollow">C text</a></li>
    </ul>
    </li>
    </ul>

我的目的是只显示相关文字并点击一个字母，例如，如果点击“A”，则显示“A Text”。

我试过下面的文字，但似乎没有完全奏效，它只显示字母标题而不显示文字。

    <script>
    $('.index-list li').hide();
    $("a.index-letters").click(function() {
    $('.index-list li').hide();
    $('#'+$(this).attr('name')).show();   
    });

    </script>

谢谢。

Answer 1

您点击的链接没有名称属性，因此$('#'+$(this).attr('name'))将失败。此外，当您只需隐藏父母时，$('.index-list li').hide();会隐藏所有列表项，因此请改用$('.index-list > li')。

尝试：

$('.index-list > li').hide();
$("a.index-letters").click(function () {
    $('.index-list > li').hide();
    $($(this).attr('href')).parent().show();
});

<强> jsFiddle example

单击字母名称时显示隐藏相关的li

1 个答案: