I am facing an issue with the code below which is supposed to change the class of li based on whether the browser URL matches the href attribute within that li.
The current problem I am encountering is that the code changes the class for all li elements, instead of just the ones containing the specific URL.
JavaScript :
$(document).ready(function() {
$("#subnav a").each(function() {
if ($(this).attr('href') == document.URL) {
$('li').addClass("selected");
}
});
});
HTML:
<div id="subnav">
<ul class="tabrow">
<li><a href="<?php echo $this->config->base_url()?>rankings/all"> Players</a>
</li>
<li><a href="<?php echo $this->config->base_url()?>rankings/top-guilds"> Guilds</a>
</li>
<li><a href="<?php echo $this->config->base_url()?>rankings/top-masterlevel">Master Level</a>
</li>
<li><a href="<?php echo $this->config->base_url()?>rankings/top-voters">Voters</a>
</li>
<li><a href="<?php echo $this->config->base_url()?>rankings/top-online">Online</a>
</li>
</ul>
</div>
Solution in case anyone needs it. Credits to nem035
$(document).ready(function() {
$("#subnav a").each(function() {
if ($(this).attr('href') == document.URL) {
$(this).parent().addClass("selected");
}
});
});