Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Jquery

Show And Hide Active Class In Li When Clicked On Input Button

Post a Comment
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. I searched all stuffs and tried a lot to add active class to part

Solution 1:

You can find the next tab / li of the current active element and add / remove class accordingly. See below solution

$(document).ready(function() {
    //register click event handler for input with name=next
    $('.tab-content input[name="next"]').click(function(event){
        event.preventDefault();//stop browser to take action for clicked anchor
        //get parent tab of next button clicked
        var $parent = $('.tab-content.active');
        //get next tab
        var $nextTabParent = $parent.next('.tab-content');
        //check if next tab exist or not
        if($nextTabParent.length > 0)
         {
             //remove active class from current tab and add active class to next tab
             $parent.removeClass('active').addClass('hide');
             $nextTabParent.removeClass('hide').addClass('active');
           
             //remove active class from current li and add it to next li
             var $activeLi = $('ul.nav.nav-tabs').find('li.active');
             $activeLi.removeClass('active');
             $activeLi.next('li').addClass('active');
         }
     });
  });

    
 .nav {
          margin-bottom: 18px;
          margin-left: 0;
          list-style: none;
        }

        .nav > li > a {
          display: block;
        }

        .nav-tabs{
          *zoom: 1;
        }

        .nav-tabs:before,
        .nav-tabs:after {
          display: table;
          content: "";
        }

        .nav-tabs:after {
          clear: both;
        }

        .nav-tabs > li {
          float: left;
        }

        .nav-tabs > li > a {
          padding-right: 12px;
          padding-left: 12px;
          margin-right: 2px;
          line-height: 14px;
        }

        .nav-tabs {
          border-bottom: 1px solid #ddd;
        }

        .nav-tabs > li {
          margin-bottom: -1px;
        }

        .nav-tabs > li > 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 > li > a:hover {
          border-color: #eeeeee #eeeeee #dddddd;
        }

        .nav-tabs > .active > a,
        .nav-tabs > .active > 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;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>CUSTOMIZE</h1>
    <div>
        <ul class="nav nav-tabs">
            <li class="active">
                <a href="#tab1">Show Tab 1</a>
            </li>
            <li>
                <a href="#tab2">Show Tab 2</a>
            </li>
            <li>
                <a href="#tab3">Show Tab 3</a>
            </li>
        </ul>   
    </div>
    <section id="tab1" class="tab-content active">
        <div>
            Content in tab 1
            <input type="button" name="next" value="next">
        </div>
    </section>
    <section id="tab2" class="tab-content hide">
        <div>
            Content in tab 2
            <input type="button" name="next" value="next">
        </div>
    </section>
    <section id="tab3" class="tab-content hide">
        <div>
            Content in tab 3
            <input type="button" name="next" value="next">
        </div>
    </section>

Solution 2:

Add this to your code:

$(".next").click(function () {
        if ($(".nav").find("li.active").next().length == 0) {
            $(".nav").find("li").first().find("a").trigger("click");
        } else {
            $(".nav").find("li.active").next().find("a").trigger("click");
        }
    });

Here is the JSFiddle demo

You already wrote the codes for adding and removing classes.

So all you have to do is find the next li element that is not active, and trigger a click on its a tag (which in turn triggers your already written code).

The if statement is used to select the first li in case next is clicked when the last li is active


Solution 3:

You can use trigger() to simulate click on tabs that already have click event See the Fiddle

HTML

<h1>CUSTOMIZE</h1>
<div>
    <ul class="nav nav-tabs">
        <li class="active"> <a href="#tab1">Show Tab 1</a>

        </li>
        <li> <a href="#tab2">Show Tab 2</a>

        </li>
        <li> <a href="#tab3">Show Tab 3</a>

        </li>
    </ul>
</div>
<section id="tab1" class="tab-content active">
    <div>Content in tab 1
        <input type="button" name="next" value="next">
    </div>
</section>
<section id="tab2" class="tab-content hide">
    <div>Content in tab 2
        <input type="button" name="next" value="next">
    </div>
</section>
<section id="tab3" class="tab-content hide">
    <div>Content in tab 3
        <input type="button" name="next" value="next">
    </div>
</section>

JS

$(document).ready(function () {
    $('.nav-tabs > li > 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 > li.active > a').attr('href');

        //find actived navigation and remove 'active' css
        var actived_nav = $('.nav-tabs > 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');
    });

    $('.tab-content input').click(function (event) {
        $(".nav.nav-tabs li.active").next("li").find("a").trigger("click");
    });
});

Solution 4:

The following, verbose answer restructures your script to help distinguish the pattern of defining and using selectors, the modifying of your control states (i.e. adding and removing class), the usage of inline functions to depict a strategy pattern, and declarative (non-anonymous) event handling..

I also modified your html structure slightly: using button in place of input type='button' and wrapping text with span tags.

Demo Sample

(function(window, $) {

  function OnClickNavTabLink(e) { // this = e.target    
    e.preventDefault(); 
    var $target_tabs = $(this); // 'a'
    var $target_nav = $target_tabs.parents('li');
    var $target_tabs_content = $($target_tabs.attr('href'));          //i.e. $('#tab1') or $('#tab2') or $('#tab3');
    
    // note: 'attr' will return the attr of the first item in the selectors
    
    ClearAllControlStates();
    SetControlState();
    
    function SetControlState() 
    {
      $target_nav
        .addClass('active');
      
      $target_tabs
        .addClass('active');
      
      $target_tabs_content
        .removeClass('hide')
        .addClass('active');      
    }    
  }
  
  function OnClickNextButton(e)
  {
    e.preventDefault();
    
    // this = button in $target_tabs_content
    
    var $target_tabs_content = $(this).parents('section[id*="tab"]').next();  
    // in this sample/demo, when clicking button in 'section#tab3', next will return 'script'; 
    
    if ($target_tabs_content.attr('id'))  // simple check, 
    {
      var $target_tabs = $('.nav-tabs > li > a[href*="' + $target_tabs_content.attr('id') + '"]'); // 'a'
      var $target_nav = $target_tabs.parents('li');
    
      ClearAllControlStates();    
      SetControlState();
    }
    
    function SetControlState()
    {      
      $target_nav
        .addClass('active');
      
      $target_tabs
        .addClass('active');
      
      $target_tabs_content
        .removeClass('hide')
        .addClass('active');   
      
    }
  }
  
  function ClearAllControlStates() 
  {
    var $navs = $('.nav-tabs > li');  
    var $tabs = $navs.children('a');
    
    var tabs_content = [];            
    $tabs.each(GetHrefAttr);    
    var $tabs_content = $(tabs_content);       
    
    //console.log("$navs:= %o - $tabs:= %o - $tabs_content:= %o", $navs, $tabs, $(tabs_content));
    
    $navs.removeClass('active');    
    $tabs.removeClass('active');
    $tabs_content.each(HideEach);    
    
    function GetHrefAttr(i, item)
    {
      tabs_content.push($(item).attr('href'));
    }
    
    function HideEach(i, item)
    {
      $(item).removeClass('active').addClass('hide');
    }
  }
  
  function ClearActiveControlStates()
  {
    var $activated_nav = $('.nav-tabs > li.active');                  //listitem
    var $activated_tabs = $activated_nav.children('a');               //hyperlinks
    
    var activated_tabs_content = [];    
    $activated_tabs.each(GetHrefAttr);    
    var $activated_tabs_content = $(activated_tabs_content);          //section_ids

    
    $activated_nav.removeClass('active');        
    $activated_tabs.removeClass('active');        
    $activated_tabs_content.each(HideEach);
    
    function GetHrefAttr(i, item)
    {
      activated_tabs_content.push($(item).attr('href'));
    }
    
    function HideEach(i, item)
    {
      $(item).removeClass('active').addClass('hide');
    }
  }
  
  function OnReadyDocument() {
    $('.nav-tabs > li > a')
      .click(OnClickNavTabLink);
    
    $('.tab-content button[name="next"]')
      .click(OnClickNextButton);
  }  

  $(window.document).ready(OnReadyDocument);
  
})(window, $ || jQuery.noConflict());

		
		
/** Start: to style navigation tab **/
.nav {
  margin-bottom: 18px;
  margin-left: 0;
  list-style: none;
}

.nav > li > a {
  display: block;
}

.nav-tabs{
  *zoom: 1;
}

.nav-tabs:before,
.nav-tabs:after {
  display: table;
  content: "";
}

.nav-tabs:after {
  clear: both;
}

.nav-tabs > li {
  float: left;
}

.nav-tabs > li > a {
  padding-right: 12px;
  padding-left: 12px;
  margin-right: 2px;
  line-height: 14px;
}

.nav-tabs {
  border-bottom: 1px solid #ddd;
}

.nav-tabs > li {
  margin-bottom: -1px;
}

.nav-tabs > li > 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 > li > a:hover {
  border-color: #eeeeee #eeeeee #dddddd;
}

.nav-tabs > .active > a,
.nav-tabs > .active > 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 **/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<h1>CUSTOMIZE</h1>
<div>
  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#tab1">Show Tab 1</a>
    </li>
    <li>
      <a href="#tab2">Show Tab 2</a>
    </li>
    <li>
      <a href="#tab3">Show Tab 3</a>
    </li>
  </ul>	
</div>
<section id="tab1" class="tab-content active">
  <div>
    <span>Content in tab 1</span>
    <button name="next">next</button>
  </div>
</section>
<section id="tab2" class="tab-content hide">
  <div>
    <span>Content in tab 2</span>
    <button name="next">next</button>
  </div>
</section>
<section id="tab3" class="tab-content hide">
  <div>
    <span>Content in tab 3</span>
    <button name="next">next</button>
  </div>
</section>

You may like these posts

Post a Comment for "Show And Hide Active Class In Li When Clicked On Input Button"