Javascript 在Jquery中创建词汇表字母表

我正在用一个列表中的字母和另一个列表中的内容制作一个词汇表。单击每个字母将显示该字母的内容，如下所示：

<ul class="alphabet">
    <li class="selected"><a class="alpha alpha-a">A</a></li>
    <li><a class="alpha alpha-b">B</a></li>
    <li><a class="alpha alpha-c">C</a></li>
    <li><a class="alpha alpha-d">D</a></li>
    <li><a class="alpha alpha-e">E</a></li>
    <li><a class="alpha alpha-f">F</a></li>
    <li><a class="alpha alpha-g">G</a></li>
    <li><a class="alpha alpha-h">H</a></li>
    <li><a class="alpha alpha-i">I</a></li>
    <li><a class="alpha alpha-j">J</a></li>
    <li><a class="alpha alpha-k">K</a></li>
    <li><a class="alpha alpha-l">L</a></li>
    <li><a class="alpha alpha-m">M</a></li>
    <li><a class="alpha alpha-n">N</a></li>
    <li><a class="alpha alpha-o">O</a></li>
    <li><a class="alpha alpha-p">P</a></li>
    <li><a class="alpha alpha-q">Q</a></li>
    <li><a class="alpha alpha-r">R</a></li>
    <li><a class="alpha alpha-s">S</a></li>
    <li><a class="alpha alpha-t">T</a></li>
    <li><a class="alpha alpha-u">U</a></li>
    <li><a class="alpha alpha-v">V</a></li>
    <li><a class="alpha alpha-w">W</a></li>
    <li><a class="alpha alpha-x">X</a></li>
    <li><a class="alpha alpha-y">Y</a></li>
    <li><a class="alpha alpha-z">Z</a></li>
</ul>
<ul class="list-objects list-object-a selected">
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
</ul>
<ul class="list-objects list-object-b">
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
</ul>
etc.

等

$（“.alphabet.alpha-a”）。单击（函数（）{
$（this）.parent（“li”）.addClass（“selected”）.sillis（“li”）.removeClass（“selected”）；
$（“ul.list-object-a”）.addClass（“选定”）.Slides（“ul.list对象”）.removeClass（“选定”）；
});
$（“.alphabet.alpha-b”）。单击（函数（）{
$（this）.parent（“li”）.addClass（“selected”）.sillis（“li”）.removeClass（“selected”）；
$（“ul.list-object-b”）.addClass（“选定”）.Slides（“ul.list对象”）.removeClass（“选定”）；
});
等

我想简化javascript，这样就不必为每个字母重复代码片段。有什么想法吗@穆罕默德·乌默？谢谢：）

试试这个：

使用

href

作为要显示列表的参考

例如，单击

将显示具有

id=“object-a”

检查以下代码并尝试运行它

$（“.alphabet li”）。单击（函数（）{
$（$（this）.find（'a'）.data（'href'））.addClass（'selected'）.sippines（'.list objects.selected'）.removeClass（'selected'）；
$（this）.addClass（'selected'）。同胞（'.selected'）。removeClass（'selected'）；
});
。字母表li{
光标：指针；
}
.字母表.已选定{
文字装饰：下划线；
}
.列出对象{
显示：无；
}
.list-objects.selected{
显示：块；
}






















试试这个：

使用
href
作为要显示列表的参考

例如，单击

将显示具有
id=“object-a”

检查以下代码并尝试运行它


$（“.alphabet li”）。单击（函数（）{
$（$（this）.find（'a'）.data（'href'））.addClass（'selected'）.sippines（'.list objects.selected'）.removeClass（'selected'）；
$（this）.addClass（'selected'）。同胞（'.selected'）。removeClass（'selected'）；
});
。字母表li{
光标：指针；
}
.字母表.已选定{
文字装饰：下划线；
}
.列出对象{
显示：无；
}
.list-objects.selected{
显示：块；
}






















您可以使用通配符：

$(class^=".alpha .alpha-").click(function() {
    $(this).parent("li").addClass("selected").siblings("li").removeClass("selected");
    $("ul.list-object-a").addClass("selected").siblings("ul.list-objects").removeClass("selected");
});

您可以使用通配符：

$(class^=".alpha .alpha-").click(function() {
    $(this).parent("li").addClass("selected").siblings("li").removeClass("selected");
    $("ul.list-object-a").addClass("selected").siblings("ul.list-objects").removeClass("selected");
});

试试这个。当点击锚定标签添加并从父类中删除
slected Class
时。然后将锚定标签的文本包装起来并附加到
标签类中相应锚定标签内容所在的位置。我的意思是，如果点击“B”，它应该选择
。list-object-B
而不是
。list-object-a
。代码
$（“ul.list对象-”+$（this.text（）.toLowerCase（））
也会这样做

$(document).ready(function () {
    $('[class^="alpha alpha-"]').click(function () {
        $(this).parent("li").addClass("selected").siblings("li").removeClass("selected");
        $("ul.list-object-" + $(this).text().toLowerCase()).addClass("selected").siblings("ul.list-objects").removeClass("selected");
    });
});

试试这个。当点击锚定标签添加并从父类中删除
slected Class
时。然后将锚定标签的文本包装起来并附加到
标签类中相应锚定标签内容所在的位置。我的意思是，如果点击“B”，它应该选择
。list-object-B
而不是
。list-object-a
。代码
$（“ul.list对象-”+$（this.text（）.toLowerCase（））
也会这样做

$(document).ready(function () {
    $('[class^="alpha alpha-"]').click(function () {
        $(this).parent("li").addClass("selected").siblings("li").removeClass("selected");
        $("ul.list-object-" + $(this).text().toLowerCase()).addClass("selected").siblings("ul.list-objects").removeClass("selected");
    });
});

@ManishJangirBlogaddition.com是一样的，
.alphabet
是父
ul
@ManishJangirBlogaddition.com是一样的，
.alphabet
是父
ul
没有问题@WimMertensI尝试了这个方法，但是点击页面就会跳回那个不理想的ID。不管怎样，我们都可以不添加href？@WimMertens，我编辑了这个。我改用了
data href
。请检查无问题@WimMertensI尝试了这个方法，但是点击页面就会跳回那个不理想的ID。不管怎样，我们都可以不添加href？@WimMertens，我编辑了这个。我改用了
data href
。请check@WimMertens很高兴该解决方案对您有效，如果此答案或任何其他答案解决了您的问题，请将其标记为accepted@WimMertens很高兴该解决方案对您有效，如果此答案或任何其他答案解决了您的问题，请将其标记为已接受