Блог

У меня есть приведенный ниже код,

     <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», отображается «Текст».

Я пробовал приведенный ниже текст, но, похоже, не работает полностью, он показывает только заголовок буквы, но не текст.

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

    </script>
  

Спасибо.

Ссылки, по которым вы нажимаете, не имеют атрибута name, поэтому это $('#' $(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