更改活動頁面的顏色（分頁）

我在想如何更改活動頁面的顏色？這個函數不工作，我真的不想把它作爲輸入類型=「按鈕」...因爲它看起來更糟糕。我在這裏錯過了什麼？更改活動頁面的顏色（分頁）

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

來源

2017-04-15 Mary

CSS類，讓我們試試這個（On Click事件在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>

來源

2017-04-15 16:02:20

工作！ :)驚人的，非常感謝！ – Mary

<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聽所有點擊...

來源

2017-04-15 15:27:09

遺憾的是這樣的功能改變頁面（也使用在window.onload）不工作 – Mary

@Mary沒有問題... ... –

功能又回來了，可惜顏色不會再次發生變化。 .. – Mary

可以遍歷所有的頁面選項卡，並確定它們是否有效。如果不是，從不活躍的刪除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>

來源

2017-04-15 15:51:52 repzero

的整點就是改變頁面的背景顏色吧？這應該做的伎倆。如前所述，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

來源

2017-04-15 16:56:28

不，不是，我的意思是頁碼的背景顏色 - 顯示我們目前正在查看哪個頁面。有像這樣的分頁https://www.w3schools.com/howto/howto_css_pagination.asp，我想改變一個活動的背景。 – Mary

更改活動頁面的顏色（分頁）

回答

相關問題