javascript - 如何在没有 jquery 的情况下仅将一个函数应用于一个特定的 div 或类中的 a 标签

Question

我在一个页面上有几个菜单，并且希望用户在每个菜单中单击的链接更改颜色并保持该颜色，直到用户单击该菜单中的另一个链接。我有这段代码:

JavaScript

function bookswitchColor(element, color) {
    links = document.getElementsByTagName("a");
    for (var i = 0; i < links.length; i++)
        links.item(i).style.color = 'red';
    element.style.color = "#0E00EB";

}

HTML

<div id="book" class="book">
    <ul>
        <li><a href="javascript:TheMenu()" onclick="bookswitchColor(this) ;">Menu</a>
        </li>
        <li><a href="javascript:book1()" onclick="bookswitchColor(this) ;">Book1</a>
        </li>
        <li><a href="javascript:book2()" onclick="bookswitchColor(this) ;">book2</a>
        </li>
    </ul>
</div>

除了更改整个页面上的 a 标签外，它还能工作。此页面显示图书库。当用户点击其中一本书时，我需要那本书保持突出显示(颜色改变)。单击一本书会调用该书的章节列表，用户单击该列表可阅读该章节。我需要该章节在不影响其他菜单的情况下保持突出显示(颜色已更改)。

我想避免使用 jQuery。

Answer 1

只需替换这一行

links=document.getElementsByTagName("a") ;

用这个:

var links = document.getElementById("book").getElementsByTagName("a");