使用纯 JavaScript 更改导航列表中的选定列表元素答案

【问题标题】：Change the selected list element in a navigation list using plain JavaScript使用纯 JavaScript 更改导航列表中的选定列表元素
【发布时间】：2015-03-23 05:11:54
【问题描述】：

我无法编写脚本来更改网页导航列表中单击的选项卡的外观。换句话说，我想让单击的选项卡显示为选定的（在代码中）。我试图通过将其id 更改为selected_link 并恢复先前选择的选项卡的id 来做到这一点。

编辑：按照 jamespaned 的建议，我将元素 ID 替换为类。

我的标签如下图所示：

所以，当我点击“bio”时，我希望它显示为“home”，而“home”则显示为其他选项卡。

由于我是 JavaScript 编码的新手，我没能做到这一点。这是我所做的：

（内联）导航列表的 HTML 代码：

<nav>
<ul id="navlist">
    <li class="selected"> <a href="index.html" tabindex="1" id="tab" class="selected_link" onClick="changeSelected(this.id)">home</a> </li>
    <li class=""> <a href="bio.html" tabindex="2" id="tab2" class="" onClick="changeSelected(this.id)">bio</a> </li>
    <li class=""> <a href="pubs.html" tabindex="3" id="tab3" class="" onClick="changeSelected(this.id)">publications</a> </li>
    <li class=""> <a href="software.html" tabindex="4" id="tab4" class="" onClick="changeSelected(this.id)">software</a> </li>
    <li class=""> <a href="contact.html" tabindex="5" id="tab5" class="" onClick="changeSelected(this.id)">contact</a> </li>
</ul>
</nav>

其各自的 CSS：

nav ul {
list-style:none;
padding:0;
margin:0;
}
nav li {
background-color:black;
display:inline;
border:solid;
border-width:1px 1px 0 1px;
margin:0 5px 0 0;
} 
nav li a {
color:white;
padding:0 10px;
}
.selected {
background-color:white;
padding-bottom: 1px; 
} 
.selected_link{
color:blue;
}

以及我为完成此任务而设计的 JavaScript，但它不起作用：

function changeSelected(clickedId)
{
    var ulist = document.getElementById("navlist");
    var elems = ulist.getElementsByTagName("class");
    for (var i = 0; i < elems.length - 1; i++)
    {
        var sel = elems[i].getAttribute("class");
        if (sel == selected)
        {
            var selli = elems[i];
            break;
        }
    }
    selli.setAttribute("class", "");
    selli.lastElementChild.setAttribute("class", "");

    var clicked = document.getElementById(clickedId);
    clicked.setAttribute("class", "selected_link");
    clicked.parentNode.setAttribute("class", "selected");
}

我怎么能只使用纯 JavaScript 来做到这一点？

【问题讨论】：

标签： javascript html css

【解决方案1】：

这个 Javascript 会做你想做的事：

function changeSelected(clickedId)
{
    var selli = document.getElementById("selected");
    var sela = document.getElementById("selected_link");
    sela.setAttribute("id", "");
    selli.setAttribute("id", "");

    var clicked = document.getElementById(clickedId);
    clicked.setAttribute("id", "selected_link");
    clicked.parentNode.setAttribute("id", "selected");
}

也就是说，这里有一些想法可能有助于您的 Javascript 教育：

您正在使用 Javascript 设置您的 ID，但是在您单击其中一个链接后，Javascript 将无法在下一页上运行。您可能需要进行一些后端（PHP/Ruby 等）编码来更改您的样式。
ID 通常用于指代页面上不变的唯一元素，例如#header 或#sidebar_banner。您可能想改用一个类，例如“.selected_link”。
您不需要同时使用#selected_link 和#selected。您可以使用“.selected”和“.selected a”来更改 CSS，因此您只需要更改一个元素。

希望有帮助！

【讨论】：