I'm trying to get a different image to show up when the page that is clicked on or that "active" can be dynamic, using javascript/jQuery. I would like to put a unique ID for each li and use javascript.
I'm very new to javascript and don't really know where to start. Any help would be great. Thanks.
<ul data-identifier="50dd2c0b-3904-4100-9076-627145a3a949" class="active nav-edit " id="nav-main-menu">
<li class=" nav-link active ">
<a href="/about" data-toggle="" class=" nav-link active ">ABOUT </a>
</li>
<li>
<a href="/teachers" data-toggle="" class=" nav-link ">FOR TEACHERS </a>
</li>
<li><a href="/students" data-toggle="" class=" nav-link ">FOR STUDENTS </a>
</li>
<li><a href="/parents" data-toggle="" class=" nav-link ">FOR PARENTS </a>
</li>
<li><a href="/contact" data-toggle="" class=" nav-link ">CONTACT US </a></li>
<li><a href="/register" data-toggle="" class=" nav-link ">REGISTER </a></li>
</ul>
jQuery: You can use .each and the incrementing index in the callback function:
$("#nav-main-menu li").each(function(index) {
$(this).attr("id", "id" + index);
});
Each li will now have an ID starting at id0 to however long the list is.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments