title: Show and hide active class in li when clicked on input button
body: <p>I want to go for next tab when i clicked on next button which is in first tab.Likewise for other two tabs as well.</p>
  
  <p>I searched all stuffs and tried a lot to add active class to particular li when i clicked on button.</p>
  
  <p>Please see the below code</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function() {
      $('.nav-tabs &gt; li &gt; a').click(function(event){
      event.preventDefault();//stop browser to take action for clicked anchor
  
      //get displaying tab content jQuery selector
      var active_tab_selector = $('.nav-tabs &gt; li.active &gt; a').attr('href');                  
  
      //find actived navigation and remove 'active' css
      var actived_nav = $('.nav-tabs &gt; li.active');
      actived_nav.removeClass('active');
  
      //add 'active' css into clicked navigation
      $(this).parents('li').addClass('active');
  
      //hide displaying tab content
      $(active_tab_selector).removeClass('active');
      $(active_tab_selector).addClass('hide');
  
      //show target tab content
      var target_tab_selector = $(this).attr('href');
      $(target_tab_selector).removeClass('hide');
      $(target_tab_selector).addClass('active');
       });
    });
  &lt;/script&gt;
      &lt;style&gt;
          /** Start: to style navigation tab **/
          .nav {
            margin-bottom: 18px;
            margin-left: 0;
            list-style: none;
          }
  
          .nav &gt; li &gt; a {
            display: block;
          }
  
          .nav-tabs{
            *zoom: 1;
          }
  
          .nav-tabs:before,
          .nav-tabs:after {
            display: table;
            content: "";
          }
  
          .nav-tabs:after {
            clear: both;
          }
  
          .nav-tabs &gt; li {
            float: left;
          }
  
          .nav-tabs &gt; li &gt; a {
            padding-right: 12px;
            padding-left: 12px;
            margin-right: 2px;
            line-height: 14px;
          }
  
          .nav-tabs {
            border-bottom: 1px solid #ddd;
          }
  
          .nav-tabs &gt; li {
            margin-bottom: -1px;
          }
  
          .nav-tabs &gt; li &gt; a {
            padding-top: 8px;
            padding-bottom: 8px;
            line-height: 18px;
            border: 1px solid transparent;
            -webkit-border-radius: 4px 4px 0 0;
               -moz-border-radius: 4px 4px 0 0;
                    border-radius: 4px 4px 0 0;
          }
  
          .nav-tabs &gt; li &gt; a:hover {
            border-color: #eeeeee #eeeeee #dddddd;
          }
  
          .nav-tabs &gt; .active &gt; a,
          .nav-tabs &gt; .active &gt; a:hover {
            color: #555555;
            cursor: default;
            background-color: #ffffff;
            border: 1px solid #ddd;
            border-bottom-color: transparent;
          }
  
          li {
            line-height: 18px;
          }
  
          .tab-content.active{
              display: block;
          }
  
          .tab-content.hide{
              display: none;
          }
  
  
          /** End: to style navigation tab **/
      &lt;/style&gt;
      &lt;h1&gt;CUSTOMIZE&lt;/h1&gt;
      &lt;div&gt;
          &lt;ul class="nav nav-tabs"&gt;
              &lt;li class="active"&gt;
                  &lt;a href="#tab1"&gt;Show Tab 1&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#tab2"&gt;Show Tab 2&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#tab3"&gt;Show Tab 3&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;   
      &lt;/div&gt;
      &lt;section id="tab1" class="tab-content active"&gt;
          &lt;div&gt;
              Content in tab 1
              &lt;input type="button" name="next" value="next"&gt;
          &lt;/div&gt;
      &lt;/section&gt;
      &lt;section id="tab2" class="tab-content hide"&gt;
          &lt;div&gt;
              Content in tab 2
              &lt;input type="button" name="next" value="next"&gt;
          &lt;/div&gt;
      &lt;/section&gt;
      &lt;section id="tab3" class="tab-content hide"&gt;
          &lt;div&gt;
              Content in tab 3
              &lt;input type="button" name="next" value="next"&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>Please help me to find the solution.Thanks</p>