CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
user3615851
user3615851

Reputation: 990

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

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

Upvotes: 1

Views: 4699

Answers (5)

Bourbia Brahim
Bourbia Brahim

Reputation: 14702

You can use the click trigger , and its going to perform the default behaviour (change tab class , and make tab active ) so you 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 beleow 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>

Upvotes: 1

Riaz Laskar
Riaz Laskar

Reputation: 1322

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');
    });
});

Upvotes: 0

guradio
guradio

Reputation: 15555

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

Upvotes: 0

Pavan Kumar T G
Pavan Kumar T G

Reputation: 13

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;}

Upvotes: 0

Omid Reza Heidari
Omid Reza Heidari

Reputation: 688

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

Upvotes: 0

Related Questions