javascript - 如何将背景更改为选中的按钮？

Question

在该菜单中如何更改所选按钮的背景？这是菜单代码

<ul id="menu">
      <li class="current_page_item"><a class="button" id="showdiv1"><span>Homepage</span></a></li>
      <li class="current_page_item1"><a class="button" id="showdiv2"><span>Experience</span></a></li>
      <li class="current_page_item2"><a class="button" id="showdiv3" ><span>Vision</span></a></li>
      <li class="current_page_item3"><a class="button" id="showdiv4" ><span>Portfolio</span></a></li>
      <li class="current_page_item4"><a class="button" id="showdiv5"><span>Social</span></li>
      <li class="current_page_item5"><a class="button" id="showdiv6"><span>About me</span></a></li>
</ul>

Answer 1

首先给所有的目标元素指定一个特定的类(这里我们指定class1)

    <style>
    .selected{
        background-color:green;
    }
</style>
    <ul id="menu">
          <li class="class1 current_page_item"><a class="button" id="showdiv1"><span>Homepage</span></a></li>
          <li class="class1 current_page_item1"><a class="button" id="showdiv2"><span>Experience</span></a></li>
          <li class="class1 current_page_item2"><a class="button" id="showdiv3" ><span>Vision</span></a></li>
          <li class="class1 current_page_item3"><a class="button" id="showdiv4" ><span>Portfolio</span></a></li>
          <li class="class1 current_page_item4"><a class="button" id="showdiv5"><span>Social</span></li>
          <li class="class1 current_page_item5"><a class="button" id="showdiv6"><span>About me</span></a></li>
    </ul>

然后你就可以远程访问带有类名的特定元素

重要通知:你必须在 html 之后使用 javascript 代码

var element = document.getElementByTagName('class1'),i,j;
for(i in element){
    element[i].onclick = function() {

        this.className = this.className + ' selected';

        for(j in element){
            element[j].className = str.replace(" selected", "");
        }
    }
}

我的建议:有很多 javascript 框架可以帮助你

为了更快更轻松地使用 javascript，其中之一是 Jquery

使用 jquery，您可以用更少的时间和更少的代码来完成它

使用 Jquery 的这段代码:

$(document).ready(function() {
    $('#menu li').click(function() {

        $('#menu li').removeClass('.selected');

        $(this).addClass('.selected');

    });
});