Geek Answers Handbook

Show and hide active class in li when pressing enter button

I want to go to the next tab when I clicked the next button, which is on the first tab. Similarly, for the other two tabs.

I searched all the materials and tried many times to add an active class to a specific one when I clicked the button.

Please see below code

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(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');
     });
  });
</script>
    <style>
        /** 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 **/
    </style>
    <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>

Please help me find a solution. thanks

+4
source share
4 answers

You can find the next tab / li of the current active element and add / remove a 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>
Run codeHide result
+3
source

trigger() , click

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");
    });
});
+1

:

$(".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");
        }
    });

JSFiddle

.

, , , li , , a (, , ).

if li , , li

+1

The following detailed answer restructures your script to help distinguish between a template for defining and using selectors, changing your control states (e.g. adding and removing a class), using built-in functions to display a strategy template, and declarative (not anonymous) event handling.

I also changed the html structure a bit: using span tags buttoninstead input type='button'and wrapping text.

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>
Run codeHide result
+1
source

More articles:


All Articles