javascript - 单击输入按钮时在 li 中显示和隐藏事件类

Question

当我单击第一个选项卡中的下一个按钮时，我想转到下一个选项卡。其他两个选项卡也是如此。

当我点击按钮时，我搜索了所有的东西并尝试了很多将事件类添加到特定的 li。

请看下面的代码

<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>

请帮我找到解决方案。谢谢

Answer 1

您可以找到当前事件元素的下一个 tab/li 并相应地添加/删除类。看下面的解决方案

$(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>