Add 'active' class to same href as current clicked menu link

Question

I have this menu structure:

<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
 <li><a class="menu-link" href="#day">Day</a></li>
 <li><a class="menu-link" href="#night">Night</a></li>
 <li><a class="menu-link" href="#drinks">Joogid</a></li>
 <li><a class="menu-link" href="#takeaway">Takeaway</a></li>
</ul>

I would like to add active class to a tab if the same href in the menu is clicked, i.e :

<ul class="nav nav-pills nav-fill" role="tablist">
         <li class="nav-item active">
             <a class="nav-link" data-toggle="tab" href="#day" role="tab">DAY</a>
         </li>
         <li class="nav-item">
             <a class="nav-link" data-toggle="tab" href="#night" role="tab">NIGHT</a>
         </li>
         <li class="nav-item">
           <a class="nav-link" data-toggle="tab" href="#drinks" role="tab">JOOGID<br></a>
         </li>
         <li class="nav-item">
           <a class="nav-link" data-toggle="tab" href="#takeaway" role="tab">takeaway</a>
         </li>
</ul>

I'm working with this code, but it doesn't seem to be close what I'm trying to acheive:

jQuery(function($) {
    var $anchors = $('.menu-link'),
    $items = $('.nav-link);

    $anchors.on('click', function() {
        var selectedIndex = $anchors.index(this);

        $anchors.removeClass('active').eq(selectedIndex).addClass('active');
        $items.removeClass('active').eq(selectedIndex).addClass('active');
    });
});

How would one add active class to tab and remove it from all other with click on the same href link click in the dropdown menu?

Any advice appreciated

Answer 1

You can use the click trigger , and it is going to perform the default behaviour (change the tab class , and make that tab active ) so your code should be like :

jQuery(function($) {
    var $anchors = $('.menu-link'),
    $items = $('.nav-link');

    $anchors.on('click', function() {
        var selectedIndex = $(this).attr('href');
        $items.eq(selectedIndex).find('a').trigger('click');
    });
});

See below snippet :

jQuery(function($) {
  var $anchors = $('.menu-link'),
      $items = $('.nav-item');

  $anchors.on('click', function() {
    var selectedIndex = $anchors.index(this);
    $items.eq(selectedIndex).find('a').trigger('click');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
    <li><a class="menu-link" href="#day">Day</a></li>
    <li><a class="menu-link" href="#night">Night</a></li>
    <li><a class="menu-link" href="#drinks">Joogid</a></li>
    <li><a class="menu-link" href="#takeaway">Takeaway</a></li>
  </ul>
</div><br><br><br><br>
<ul class="nav nav-pills nav-fill" role="tablist">
  <li class="nav-item active">
    <a class="nav-link" data-toggle="tab" href="#day" role="tab">DAY</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#night" role="tab">NIGHT</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#drinks" role="tab">JOOGID<br></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#takeaway" role="tab">takeaway</a>
  </li>
</ul>
<div class="tab-content">
  <div id="day" class="tab-pane fade in active">
    <h3>Tab 1</h3>
    <p>Some content.</p>
  </div>
  <div id="night" class="tab-pane fade">
    <h3>Tab 2</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="drinks" class="tab-pane fade">
    <h3>Tab 3</h3>
    <p>Some content in menu 2.</p>
  </div>
  <div id="takeaway" class="tab-pane fade">
    <h3>Tab 3</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

Answer 2

You can use 'disabled' att to your html and on click event change att : (You need jquery)

     <script>
     $('your eldmdnt name or id or class').attr('disabled','disabeld');
    </script>

Use disabled att and don't use active when whant be active remove this att when want be unactive insert this att(code is for make disabled)

Hope it will work.let me know

Answer 3

Try this fiddle, it shows how to add active class to the jQuery UI tabs

<div id="tabs">
<ul>
    <li><a href="#tabs-1">Tab 1</a>
    </li>
    <li><a href="#tabs-2">Tab 2</a>
    </li>
    <li><a href="#tabs-3">Tab 3</a>
    </li>
</ul>
<div id="tabs-1">
    <p>Content for Tab 1</p>
</div>
<div id="tabs-2">
    <p>Content for Tab 2</p>
</div>
<div id="tabs-3">
    <p>Content for Tab 3</p>
</div>

Your jQuery

$("#tabs").tabs({
activate: function (event, ui) {
    var active = $('#tabs').tabs('option', 'active');
    $("#tabid").html('the tab id is ' + $("#tabs ul>li a").eq(active).attr("href"));

}});

Your CSS

#tabs {
width: 95%;
margin-left: auto;
margin-right: auto;
margin-top: 10px;}

Answer 4

var $anchors = $('.menu-link'),
  $items = $('.nav-link');

$anchors.on('click', function() {
  var href = $(this).attr("href");

  $anchors.removeClass('active');
  $items.parent().removeClass('active');

  $(this).addClass('active');
  $('.nav-link[href=' + href + ']').closest('li').addClass('active');

});

.active {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
  <li><a class="menu-link" href="#day">Day</a></li>
  <li><a class="menu-link" href="#night">Night</a></li>
  <li><a class="menu-link" href="#drinks">Joogid</a></li>
  <li><a class="menu-link" href="#takeaway">Takeaway</a></li>
</ul>

<ul class="nav nav-pills nav-fill" role="tablist">
  <li class="nav-item active">
    <a class="nav-link" data-toggle="tab" href="#day" role="tab">DAY</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#night" role="tab">NIGHT</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#drinks" role="tab">JOOGID<br></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#takeaway" role="tab">takeaway</a>
  </li>
</ul>

1. Get the click href
2. Use attribute select to select the proper href

Answer 5

i think this might do the job.

jQuery(function($) {
    var $anchors = $('.menu-link'),
    $items = $('.nav-link');

    $anchors.on('click', function() {
        var href = $(this).attr('href');

        $('.nav').find('.nav-item').removeClass('active');
        $('.nav').find('.nav-item[href="'+href+'"]').addClass('active');
    });
});