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）

text

然后您可以远程访问具有类名

的特定项目

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

    <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>

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

更快更轻松地使用javascript，其中一个是Jquery

使用jquery，你可以用更少的时间和更少的代码来实现它

此代码与Jquery：

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", "");
        }
    }
}

Answer 2

您可以使用document.body.style.backgroundColor = "red";更改bachground颜色。
你必须定义onclick：

<button onclick="myFunction()">Click me</button>

并在JS文件中：

function myFunction() { 
  document.body.style.backgroundColor = "red"
}

如何更改背景到按钮选择？

2 个答案: