Looking to connect a div with a button, where each div has its own corresponding button. The goal is to change the button color when the associated div is visible.
Here's my code attempt:
<ul style="padding-left:10em;">
<li id="btID-1">1</li>
<li id="btID-2">2</li>
<li id="btID-3">3</li>
<li id="btID-4">4</li>
</ul>
<div id="pgID-1" class="ui-content">content 1</div>
<div id="pgID-2" class="ui-content">content 2</div>
<div id="pgID-3" class="ui-content">content 3</div>
<div id="pgID-4" class="ui-content">content 4</div>
Jquery script:
$(document).ready(function () {
$('.ui-content').hide();
$('#pgID-1').show();
$(setPage);
function setPage() {
var active = $('.ui-content:visible');
currPage = $('.ui-content:visible').index(active);
currButton = $('.ui-dot').index(currPage);
$(currButton).css("color:#ff0000");
}
});
I'm also looking to have the buttons control which div is shown and hide the rest. Any feedback on improving this approach is welcome!
Your insights are greatly appreciated.