Activating a tab through a javascript call (created from an unordered list)

Question

I have a tabbed menu created through CSS and an HTML unordered list as shown in this fiddle . When the link is clicked, I want to scroll down to menu item 2 and make it the selected (active) one. I got the scrolling part down but not sure how to activate the tab.

Could someone please share the Javascript/jQuery to do that?

Here is a snippet of my code, please see the fiddle for the rest..

<a>Take me to menu item 3</a>

<div class="container">  
  <ul class="nav nav-tabs">
    <li id="home" class="active">Home</li>
    <li id="menu1-tab">Menu 1</li>
    <li id="menu2-tab">Menu 2</li>
   <li id="menu3-tab">Menu 3</li>
 </ul>
</div>

<script>
$('a').click( function() {
$("html, body").animate({ scrollTop: $('#menu2-tab').offset().top }, 1500); 
   } ); // how to also activate menu item 2?
 </script>

Answer 1

Simply remove the active class from all li s and add the same class to the li you're interested in:

 $('a').click( function() { $("html, body").animate({ scrollTop: $('#menu2-tab').offset().top }, 1500); $(".nav li").removeClass("active"); $(".nav li").eq(2).addClass("active"); } ); 

 .nav { position: relative; width:100%; margin:0 auto; } .nav li{ float:left; position:relative; display:block; background-color:#fcfcfc; border:solid 1px #e2e2e2; height:37px; line-height:37px; text-align:center; color:#aeaeae; text-transform:uppercase; font-family: 'latobold', Arial, Helvetica, sans-serif; font-size:13px; margin:0 -2px 0 0; } .nav.col3 li { width:33.3333%; *width:33.2222%; } .nav li:hover { text-decoration:none; cursor:pointer; } .nav li.active{ z-index:50; font-family: 'latobold', Arial, Helvetica, sans-serif; border:solid 1px #e2e2e2; border-bottom:1px solid #fff; color:#6b7f12; background-color:#fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a>Take me to menu item 3</a> <p> Here is some other content, you can ignore this. <p> Here is some other content, you can ignore this. <p> Here is some other content, you can ignore this. <p> Here is some other content, you can ignore this. <p> Here is some other content, you can ignore this. <p> Here is some other content, you can ignore this. <p> Here is some other content, you can ignore this. <p> Here is some other content, you can ignore this. <p> Here is some other content, you can ignore this. <p> Here is some other content, you can ignore this. <p> Here is some other content, you can ignore this. <p> Here is some other content, you can ignore this. <p> Here is some other content, you can ignore this. <p> Here is some other content, you can ignore this. <p> Here is some other content, you can ignore this. <p> Here is some other content, you can ignore this. <p> <div class="container"> <ul class="nav nav-tabs"> <li id="home" class="active">Home</li> <li id="menu1-tab">Menu 1</li> <li id="menu2-tab">Menu 2</li> <li id="menu3-tab">Menu 3</li> </ul> </div> 

Answer 2

You might want to try this:

Below is the HTML

<a href="#menu2-tab">Take me to menu item 3</a> <p>

    Here is some other content, you can ignore this. <p>

    Here is some other content, you can ignore this. <p>

    Here is some other content, you can ignore this. <p>

    Here is some other content, you can ignore this. <p>

    Here is some other content, you can ignore this. <p>

    Here is some other content, you can ignore this. <p>

    Here is some other content, you can ignore this. <p>

    Here is some other content, you can ignore this. <p>

    Here is some other content, you can ignore this. <p>

    Here is some other content, you can ignore this. <p>

Here is some other content, you can ignore this. <p>
Here is some other content, you can ignore this. <p>
Here is some other content, you can ignore this. <p>
Here is some other content, you can ignore this. <p>
Here is some other content, you can ignore this. <p>
Here is some other content, you can ignore this. <p>

<div class="container">



  <ul class="nav nav-tabs">
    <li id="home" class="active">Home</li>
    <li id="menu1-tab">Menu 1</li>
    <li id="menu2-tab">Menu 2</li>
    <li id="menu3-tab">Menu 3</li>
  </ul>


</div>

Below is the jquery code for selecting

$("a").each(function(){
    var _$this = $(this);
    _$this.click(function(){
        var id = _$this.attr("href");
        $("html, body").animate({ scrollTop: $(id).offset().top }, 1500);
        $(id).parent().find(".active").removeClass("active");
        $(id).addClass("active");
    });
});