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

Question

我在编写脚本来更改网页导航列表中单击选项卡的外观时遇到了问题。换句话说，我想让点击的标签显示为选中的(在代码中)。我试图通过将其 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 来做到这一点？

Answer 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 教育:

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

希望对您有所帮助!