Hey, I currently have a navbar in my home.scala.html that looks like this:
<ul class="nav nav-justified">
<li><a href="@routes.Application.apps()">@Messages("views.main.apps")</a></li>
<li ><a href="#">@Messages("views.main.activity")</a></li>
<li><a href="@routes.Application.devices()">@Messages("views.main.devices")</a></li>
<li><a href="#">@Messages("views.main.account")</a></li>
<li id="logout"><a href="#">@Messages("views.main.logout")</a></li>
</ul>
I am attempting to apply the active class when a link is clicked like so:
<script>
$(document).ready(function () {
$('ul.nav > li').click(function (e) {
$('ul.nav > li').removeClass('active');
$(this).addClass('active');
});
});
</script>
Unfortunately, when running the application, only the list items with the href="#" attribute are marked as active. The other list items remain inactive even after clicking, even though they redirect to the specified link. Any assistance on this matter would be greatly appreciated. Thank you.
Edit: The structure of the main.scala.html is as follows:
<html>
<head></head><body>
<ul class="nav nav-justified">
<li><a href="@routes.Application.apps()">@Messages("views.main.apps")</a></li>
<li ><a href="">@Messages("views.main.activity")</a></li>
<li><a href="@routes.Application.devices()">@Messages("views.main.devices")</a></li>
<li><a href="#">@Messages("views.main.account")</a></li>
<li id="logout"><a href="#">@Messages("views.main.logout")</a></li>
</ul>
</div>
</nav>
<div id="showsspData">
@content
</div>
</div>
</body>
</html>
Then the apps.scala.html will appear as-
@main("string to pass"){
//html content for page
}