Menu
I was playing around with the W3schools code
from: [url]https://www.w3schools.com/howto/howto_css_next_prev.asp
I added some logic to determine which ‘page’ a user would advance (retreat)
from while clicking on the next (prev) buttons.
I wanted to use the CSS :target pseudo tag with the href of the anchor tag.
Everything appears to work well EXCEPT the css associated with
the following in the code below.
[code]
#bPNseg:target { color: white; background-color: red; }
#oPNseg:target { color: red; background-color: yellow; }
#rPNseq:target { color: yellow; background-color: blue; }
Only the #rPNseg assignments seem to work when the round buttons are clicked.
I cannot figure out what I need to change to make the foreground and background
colors change when the ‘bPNseg’ and ‘oPNseg’ prev/next buttons are clicked. ?
Here is the code that I am working with:
[code=php]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title> Prev/Next Button Counter </title>
<style>
a { text-decoration: none; display: inline-block; padding: 8px 16px; }
a:hover { background-color: #bbb; color: black; }
.prev { background-color: #4CAF50; color: white; float: left; }
.next { background-color: #4CAF50; color: white; float: right; }
.round { border-radius: 50%; }
.group:after { content: “”; display: table; clear: both; }
#btnPN { display: block; width: 900px; margin: 0 auto; text-align: center; }
#ovlPN { display: block; width: 600px; margin: 0 auto; text-align: center; }
#rndPN { display: block; width: 300px; margin: 0 auto; text-align: center; }
#bPNseg:target { color: white; background-color: red; }
#oPNseg:target { color: red; background-color: yellow; }
#rPNseq:target { color: yellow; background-color: blue; }
</style>
</head>
<body>
<h2>Previous and Next Buttons</h2>
<hr>
<div id=”btnPN” class=”group”>
<a href=”#bPNseq” class=”prev” onclick=”delta(this)”>« Prev</a>
<a href=”#bPNseq” class=”next” onclick=”delta(this)”>Next »</a>
<span id=”bPNseq” data-page=”0″>Page 0</span>
</div >
<hr>
<div id=”ovlPN” class=”group”>
<a href=”#oPNseq” class=”prev round” onclick=”delta(this)”>‹ Prev</a>
<a href=”#oPNseq” class=”next round” onclick=”delta(this)”>Next ›</a>
<span id=”oPNseq” data-page=”0″>Page 0</span>
</div >
<hr>
<div id=”rndPN” class=”group”>
<a href=”#rPNseq” class=”prev round” onclick=”delta(this)”>‹</a>
<a href=”#rPNseq” class=”next round” onclick=”delta(this)”>›</a>
<span id=”rPNseq” data-page=”0″>Page 0</span>
</div>
<hr>
<script>
function delta(info) {
var id, cl, pg; // , maxValue=10;
id = info.href;
id = id.substring(id.indexOf(‘#’)+1);
if (info.classList.contains(‘prev’)) { cl = -1; } else { cl = 1; }
pg = document.getElementById(id).getAttribute(‘data-page’);
pg = Number(pg)+cl;
if (pg < 0) { pg = 0; } // lower limit check
// if (pg > maxValue) { pg = maxValue; } // upper limit check
document.getElementById(id).setAttribute(‘data-page’, pg);
document.getElementById(id).innerHTML = ‘Page ‘+pg;
}
</script>
</body>
</html>