Changing color of active page (pagination)
Question
I'm wondering how to change the color of an active page? This function isn't working and I don't really want to make it as input type="button"... as it looks way worse. What am I missing here?
<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>
4 answers
solution1
2 ACCPTED 2017-04-15 16:02:20
let's try this ( on click event in html is not a good practice )
<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>
solution2
0 2017-04-15 15:27:09
<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>
Simply use the js onclick to listen to all clicks...
solution3
0 2017-04-15 15:51:52
You can loop through all your page tabs and determine if they are active. If not, remove the css class from the inactive ones and add a css class on the active one
Example below
.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>
solution4
0 2017-04-15 16:56:28
The whole point is to change the background color of the page, right? This should do the trick. As mentioned previously, onclick is not great practice.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.