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

Question

我想知道如何更改活动页面的颜色？此功能不起作用，我真的不想将其作为输入类型="button"...，因为它看起来更糟。我在这里错过了什么？

<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

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

您可以遍历所有页面选项卡并确定它们是否处于活动状态。如果不是，请从非活动的 css class 中删除并在活动的

上添加 css class

下面的例子

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

让我们试试这个（html 中的点击事件不是一个好的做法）

<form1>

  <div class="pagination">
    <a id="pageOne">1</a>
    <a id="pageTwo">2</a>
    <a id="pageThree">3</a>
  </div>
</form1>
<script>
  links = document.querySelectorAll("a")
  links.forEach(function (item) {
    item.addEventListener('click', function () {
      //reset the color of other links
      links.forEach(function (item) {
        item.style.backgroundColor = '#fff'
      })
      // apply the style to the link
      this.style.backgroundColor = '#ffcce9'
    });
  })

</script>

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

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

Changing color of active page (pagination)

html

javascript

pagination

background-color