I want to make the currently active li element get some proper styling on click , and remove it when the other li's element are clicked,
I am relying on this to do it :
$('li').click(function() {
$(this).siblings().removeClass('current');
$(this).addClass('current');
});
as you can see the code works when on jsFiddle, example on JsFiddle, except that it does not work for me, and I doubt that this is something has to do with Turbolinks and Jquery-turbolinks? , or is it just some css problem?
CSS file goes in this order:
.current /*I tried sidebar ul li.current but none happened.*/
.sidebar ul li
.sidebar ul li:hover
.sidebar ul li:active
.sidebar ul li a
a
a:hover
Update #1 : Solutions I tried.
$('li').click(function() {
$(this).siblings().removeClass('current');
$(document).on('page:load',function(){
$('li').addClass('current');
});
});
Not the best code in the world, this looks so wrong, however it was just a random try in vain.
This has made the changes to the whole li's (obviously), after the page has loaded, that's a half solution ,except that I don't know how to get the clicked li.
Update#2 : Html code structure
<body>
<nav class=navbar navbar-default hidden-lg hidden-md role=navigation style=margin-bottom:0;>
<div class=container-fluid>
<!-- Brand and toggle get grouped for better mobile display -->
<div class=navbar-header>
<button type=button class=navbar-toggle data-toggle=collapse data-target=#bs-example-navbar-collapse-1>
<span class=sr-only>Toggle navigation</span>
<span class=icon-bar></span>
<span class=icon-bar></span>
<span class=icon-bar></span>
</button>
<a class=navbar-brand href=#>Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class=collapse navbar-collapse id=bs-example-navbar-collapse-1>
<ul class=navbar navbar-nav navbar-right>
<li><a href=></a></li>
<li><a href=></a></li>
<li><a href=></a></li>
<li><a href=></a></li>
<li><a href=></a></li>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- navbar -->
<div class=container-fluid>
<div class=window>
<div class=col-md-12>
<div class=row>
<div class=col-sm-2 hidden-sm hidden-xs style=padding:0;>
<div class=span2 style=height:5%;>
<div class=topsidebar></div>
</div>
<div class=span8 style=height:90%;>
<div class=sidebar>
<ul>
<li><a href=></a></li>
<li><a href=></a></li>
<li><a href=></a></li>
<li><a href=></a></li>
<li><a href=></a></li>
<li><a href=></a></li>
</ul>
</div>
</div>
<div class=span2 style=height:5%;>
<div class=bottomsidebar></div>
</div>
</div>
<div class=col-sm-10>
<div class=span2 style=height:5%;>
<div class=windowtop id=u>
</div>
</div>
<div class=span8 style=height:90%;>
<div class=windowmain style=overflow:auto;>
<%= bootstrap_flash %>
<%= yield %>
</div>
</div>
<div class=span2 style=height:5%;>
<div class=windowbottom></div>
</div>
</div>
</div>
</div><!-- window -->
</div><!--container-fluid-->
</body>
I am targeting the second li's that are in the sidebar div.
