Bootstrap - changing active class in navbar

Question

I know this question was asked more than million times but there's a gap I can't fill yet.

I have a pretty basic navbar structure like this:

<ul class="nav navbar-nav navbar-right">
        <li class="nav-item">
            <%= link_to "Entry", entry_path, class: 'nav-link', 'data-turbolinks' => false %>
        </li>
        <li class="nav-item">
            <%= link_to "Entry 2", entry2_path, class: 'nav-link', 'data-turbolinks' => false %>
        </li>
        <li class="nav-item localization-links">
            <% unless I18n.locale == :en %>
                <div class="unactive-localization-button">
                    <%= link_to "EN", locale: :en %>
                </div>
            <% else %>
                <a class: 'nav-link'>EN</a> 
            <% end %>
        </li>
        <li class="nav-item localization-links">
            <% unless I18n.locale == :fr %>
                <%= link_to "FR", locale: :fr %>
            <% else %>
                <a class: 'nav-link'>FR</a>
            <% end %>
        </li>
    </ul>

My actual structure is more complex so I reduced most of the code like other links and conditions for better readability. I change active class like this:

$(".nav li").click(function() {
    if ($(".nav li").hasClass("active")) {
       $(this).removeClass("active");
    } else {
       $(this).addClass("active");
    }
});

And it works for all the links ('Entry 1', 'Entry 2', etc) except of my localization links. All I want is to give active class to these links but somehow nothing I read so far worked for me (I used this thread to check where I went wrong). I have no console errors when I change localization and I obviously add 'active' class manually in browser's editor, but not with my code. Any thoughts why? Thanks in advance for your time, I appreciate any comment or answer!

The first thing I noticed is that `if ($(".nav li").removeClass("active")) {` should be `if ($(".nav li").hasClass("active")) {`. `removeClass()` will never return "true" — sn3ll, May 15 '17 at 15:55
Yes, that was a typo, of course it's hasClass, not removeClass, I edited snippet — Michael Spiegelberg, May 15 '17 at 16:00

score 0 · Answer 1 · answered May 16 '17 at 08:40

I solved this issue. This is not a common problem (at least I didn't found it while googling), but I will post my solution anyway in case someone is facing such issue too. My problem was incorrect unless statement and this is how I made it work:

<% unless I18n.locale == :en %>
    <li class="nav-item">
        <%= link_to "EN", locale: :en %>
    </li>
<% else %>
    <li class="nav-item active">
        <a class='nav-link'>EN</a> 
    </li>
<% end %>
<% unless I18n.locale == :fr %>
    <li class="nav-item">
        <%= link_to "FR", locale: :fr %>
    </li>
 <% else %>
     <li class="nav-item active">
         <a class='nav-link'>FR</a>
     </li>
 <% end %>

So I just explicitly pass active class if user chose locale.

Bootstrap - changing active class in navbar

1 Answers1