Question

我想知道如何更改活动页面的颜色？这个功能不起作用，我真的不想把它作为输入类型=＆＃34;按钮＆＃34; ...因为它看起来更糟糕。我在这里缺少什么？

<form1>
        <script>
                function btnColor(btn, color) {
                        var property = document.getElementById(btn)
                        property.style.backgroundColor = color;
                        }
        </script>
        <div class="pagination">
                <a id="pageOne" onclick="btnColor('pageOne','#ffcce9');">1</a>
                <a id="pageTwo" onclick="btnColor('pageTwo','#ffcce9');">2</a>
                <a id="pageThree" onclick="btnColor('pageThree','#ffcce9');">3</a>
        </div>
</form1>

Answer 1

让我们试试这个（在HTML中点击事件不是一个好习惯）

arry[i][j]

Answer 2

<form1>
    <script>
            window.addEventListener("onload",function(){
               console.log("loaded");
               ["pageOne","pageTwo","pageThree"].forEach(function(id){
                    console.log(id);
                   document.getElementById(id).addEventListener("click",function(){
                        console.log(this);
                        this.style.backgroundColor=,'#ffcce9';
                   });
                });
             });
    </script>
    <div class="pagination">
            <a id="pageOne" >1</a>
            <a id="pageTwo" >2</a>
            <a id="pageThree" >3</a>
    </div>
</form1>

只需使用js onclick即可收听所有点击...

Answer 3

您可以遍历所有页面标签并确定它们是否处于活动状态。如果没有，请从不活动的类中删除css类，并在活动的类上添加一个css类

以下示例

.color{
background:#ffcce9
}
.pages:hover{
cursor:pointer
}

<form1>
  <script>
    function btnColor(btn, color) {
      property = document.getElementById(btn);
      property.classList.add("color");
      var all_pages = document.getElementsByClassName("pages");
      for (x = 0; x < all_pages.length; ++x) {
        if (all_pages[x].classList.contains("color") && all_pages[x] != property) {
          all_pages[x].classList.remove("color");
        } //end if
      }

    }
  </script>
  <div class="pagination">
    <a id="pageOne" class="pages" onclick="btnColor('pageOne','#ffcce9');">1</a>
    <a id="pageTwo" class="pages" onclick="btnColor('pageTwo','#ffcce9');">2</a>
    <a id="pageThree" class="pages" onclick="btnColor('pageThree','#ffcce9');">3</a>
  </div>
</form1>

Answer 4

重点是改变页面的背景颜色吧？这应该可以解决问题。如前所述，onclick不是很好的做法。

<body>
  <button data-color="black">Page 1</button>
  <button data-color="blue">Page 2</button>

  <script>
    var buttons = document.querySelectorAll('button');

    buttons.forEach(function (button) {
        button.addEventListener('click', function () {
            var color = button.dataset.color;
            document.body.style.background = color;
        });
    });
  </script>
</body>

http://jsbin.com/guxoyok/edit?html,js,console,output

更改活动页面的颜色（分页）

4 个答案: