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

July 25, 2024 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 clickedvar $parent = $('.tab-content.active');
        //get next tabvar $nextTabParent = $parent.next('.tab-content');
        //check if next tab exist or notif($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 livar $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: 4px4px00;
             -moz-border-radius: 4px4px00;
                  border-radius: 4px4px00;
        }

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

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><h1>CUSTOMIZE</h1><div><ulclass="nav nav-tabs"><liclass="active"><ahref="#tab1">Show Tab 1</a></li><li><ahref="#tab2">Show Tab 2</a></li><li><ahref="#tab3">Show Tab 3</a></li></ul></div><sectionid="tab1"class="tab-content active"><div>
            Content in tab 1
            <inputtype="button"name="next"value="next"></div></section><sectionid="tab2"class="tab-content hide"><div>
            Content in tab 2
            <inputtype="button"name="next"value="next"></div></section><sectionid="tab3"class="tab-content hide"><div>
            Content in tab 3
            <inputtype="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><ulclass="nav nav-tabs"><liclass="active"><ahref="#tab1">Show Tab 1</a></li><li><ahref="#tab2">Show Tab 2</a></li><li><ahref="#tab3">Show Tab 3</a></li></ul></div><sectionid="tab1"class="tab-content active"><div>Content in tab 1
        <inputtype="button"name="next"value="next"></div></section><sectionid="tab2"class="tab-content hide"><div>Content in tab 2
        <inputtype="button"name="next"value="next"></div></section><sectionid="tab3"class="tab-content hide"><div>Content in tab 3
        <inputtype="button"name="next"value="next"></div></section>

$(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 selectorvar active_tab_selector = $('.nav-tabs > li.active > a').attr('href');

        //find actived navigation and remove 'active' cssvar 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 contentvar 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, $) {

  functionOnClickNavTabLink(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 selectorsClearAllControlStates();
    SetControlState();
    
    functionSetControlState() 
    {
      $target_nav
        .addClass('active');
      
      $target_tabs
        .addClass('active');
      
      $target_tabs_content
        .removeClass('hide')
        .addClass('active');      
    }    
  }
  
  functionOnClickNextButton(e)
  {
    e.preventDefault();
    
    // this = button in $target_tabs_contentvar $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();
    }
    
    functionSetControlState()
    {      
      $target_nav
        .addClass('active');
      
      $target_tabs
        .addClass('active');
      
      $target_tabs_content
        .removeClass('hide')
        .addClass('active');   
      
    }
  }
  
  functionClearAllControlStates() 
  {
    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);    
    
    functionGetHrefAttr(i, item)
    {
      tabs_content.push($(item).attr('href'));
    }
    
    functionHideEach(i, item)
    {
      $(item).removeClass('active').addClass('hide');
    }
  }
  
  functionClearActiveControlStates()
  {
    var $activated_nav = $('.nav-tabs > li.active');                  //listitemvar $activated_tabs = $activated_nav.children('a');               //hyperlinksvar 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);
    
    functionGetHrefAttr(i, item)
    {
      activated_tabs_content.push($(item).attr('href'));
    }
    
    functionHideEach(i, item)
    {
      $(item).removeClass('active').addClass('hide');
    }
  }
  
  functionOnReadyDocument() {
    $('.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: 4px4px00;
  -moz-border-radius: 4px4px00;
  border-radius: 4px4px00;
}

.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 **/

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><h1>CUSTOMIZE</h1><div><ulclass="nav nav-tabs"><liclass="active"><ahref="#tab1">Show Tab 1</a></li><li><ahref="#tab2">Show Tab 2</a></li><li><ahref="#tab3">Show Tab 3</a></li></ul></div><sectionid="tab1"class="tab-content active"><div><span>Content in tab 1</span><buttonname="next">next</button></div></section><sectionid="tab2"class="tab-content hide"><div><span>Content in tab 2</span><buttonname="next">next</button></div></section><sectionid="tab3"class="tab-content hide"><div><span>Content in tab 3</span><buttonname="next">next</button></div></section>

Html5 Dictionary