Question

您好，我有正文表单HTML代码

<body>
<div id="page-content" class="header-clear">

    <div id="page-content-scroll"><!--Enables this element to be scrolled --> 



            <div class="content padding-content-tab">
                <div id="test-tab">
                    <div class="row">
                        <ul class="tabs padding-tab">
                            <div class="col-xs-4 orange-tab current text-center" data-tab="tabs-1">
                                <li class="tab-link" ><a href="#tabs-1">Step 1</a></li>
                            </div>
                            <div class="col-xs-4 orange-tab text-center" data-tab="tabs-2">
                                <li class="tab-link" ><a href="#tabs-2">Step 2</a></li>
                            </div>
                            <div class="col-xs-4 orange-tab text-center" data-tab="tabs-3">
                                <li class="tab-link" ><a href="#tabs-3">Step 3</a></li>
                            </div>

                        </ul>
                    </div>

                    <div id="tabs-1" class="tab-content current">
                        <div class="tab-elements">

                            <div class="text-center"> 
                                <button id="next_button" name="next_button" class="next-button">Next</button> 


                            </div>

                        </div>
                    </div>
                    <div id="tabs-2" class="tab-content">
                        <div class="tab-elements">
                            dolore magna aliqua. Ut enim ad minim veniam, quis
                            nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </div>
                    </div>
                    <div id="tabs-3" class="tab-content">
                        <div class="tab-elements">
                           a commodo consequat.
                        </div>
                    </div>
                </div>
            </div>
        </div>  
    </div>
</div>
</body>

这是我的JS

    $('#next_button').click(function(){
        var tab_id = $('ul.tabs div.orange-tab').attr('data-tab');

        $('ul.tabs div.orange-tab').removeClass('current');
        $('div.tab-content').removeClass('current');

        $('ul.tabs div.orange-tab').addClass('current');
        $("#"+tab_id).addClass('current');
    });

这就是我试图改变标签的方式，但不起作用。我能尝试什么解决方案？我想按“下一步”按钮并更改选项卡。我想要一个简单的解决方案，但要工作。

Answer 1

这是解决方案：

<script>
$(function(){

    $('#nexttab').click(function(e){
        e.preventDefault();
        $('#mytabs a[href="#second"]').tab('show');
    })

})
</script>
<div class="container">

    <!-- Nav tabs -->
    <ul id="mytabs" class="nav nav-tabs" role="tablist">
      <li class="active">
          <a href="#first" role="tab" data-toggle="tab">
              <icon class="fa fa-home"></icon> Step 1
          </a>
      </li>
      <li><a href="#second" role="tab" data-toggle="tab">
          <i class="fa fa-user"></i> Step 2
          </a>
      </li>
      <li>
          <a href="#third" role="tab" data-toggle="tab">
              <i class="fa fa-envelope"></i> Step 3
          </a>
      </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane fade active in" id="first">
          <h2>First tab</h2>
          <button type="button" id="nexttab" class="btn btn-primary">Set second tab</button>
      </div>
      <div class="tab-pane fade" id="second">
          <h2>Second tab</h2>
          <p>  dolore magna aliqua. Ut enim ad minim veniam, quis
                            nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div class="tab-pane fade" id="third">
          <h2>Third tab</h2>
          <p> a commodo consequat.</p>
      </div>
    </div>

</div>

Answer 2

您需要先find当前所选标签，其中class为current，然后find next标签，如下所示

$(document).ready(function() {

  $('#next_button').click(function() {
    //first find the current selected tab and find next tab in the line as follows,
    var nextTab = $('ul.tabs div.orange-tab.current').next();

    //remove selected from current / all
    $('ul.tabs div.orange-tab').removeClass('current');
    $('div.tab-content').removeClass('current');

    //set it as selected
    nextTab.addClass('current');
    //to show the content 
    $('div[id='+nextTab.data('tab')+']').addClass('current');
    // or this should to work
    //$('div[id='+nextTab.attr('data-tab')+']').addClass('current');
  });
});

Answer 3

使用以下代码，您可以添加标签并继续单击以更改标签：

的javascript：

$('#next_button').click(function(e){
    var tab_id = Number($(e.target).closest('div.tab-content').attr('data-id'));
    var currentTabId = Number($('ul.tabs div.orange-tab.current').attr('data-tabid'));
    var tabAmount = $('ul.tabs div.orange-tab').length;
    var nextTabId = (currentTabId == tabAmount ? 1 : currentTabId +1);

    $('ul.tabs div.orange-tab').fadeOut().removeClass('current');
    $('div.tab-content').fadeOut().removeClass('current');

    $('ul.tabs div.orange-tab[data-tabid="' + nextTabId + '"]').addClass('current').fadeIn();
    $('div[data-id="' + nextTabId + '"]').addClass('current').fadeIn();
});

HTML：

<div id="page-content" class="header-clear">
    <div id="page-content-scroll"><!--Enables this element to be scrolled -->
        <div class="content padding-content-tab">
            <div id="test-tab">
                <div class="row">
                    <ul class="tabs padding-tab">
                        <div style="display:block;" class="col-xs-4 orange-tab text-center current" data-tabid="1">
                            <li class="tab-link" ><a href="#tabs-1">Step 1</a></li>
                        </div>
                        <div style="display:none;" class="col-xs-4 orange-tab text-center" data-tabid="2">
                            <li class="tab-link" ><a href="#tabs-2">Step 2</a></li>
                        </div>
                        <div style="display:none;" class="col-xs-4 orange-tab text-center" data-tabid="3">
                            <li class="tab-link" ><a href="#tabs-3">Step 3</a></li>
                        </div>
                      </ul>
                    </div>

                    <div style="display:block;" data-id="1" class="tab-content current">
                        <div class="tab-elements">
                          Lorem ipsum dolor sit amet
                        </div>
                    </div>
                    <div style="display:none;" data-id="2" class="tab-content">
                        <div class="tab-elements">
                            dolore magna aliqua. Ut enim ad minim veniam, quis
                            nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </div>
                    </div>
                    <div style="display:none;" data-id="3" class="tab-content">
                        <div class="tab-elements">
                           a commodo consequat.
                        </div>
                    </div>
                    <div class="text-center">
                        <button id="next_button" name="next_button" class="next-button">Next</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 4

元素应该指向它们的下一个元素。这是代码

enter code here $('#next_button').click(function() {
    var tab_id = $('ul.tabs .orange-tab.current').attr('data-tab');
    var first = $('ul.tabs .orange-tab:first').attr('data-tab');


    $current = $('ul.tabs div.orange-tab.current').removeClass('current').next();
    $currentTabContent = $('#' + tab_id).removeClass('current').next();

    if ($current.length) {
        $current.addClass('current');
        $currentTabContent.addClass('current');
    } else {
        $('ul.tabs div.orange-tab:first').addClass('current');
        $("#" + first).addClass('current');
    }

}）;

工作小提琴[链接]（https://jsfiddle.net/yonashailug/a8n3kdus/）

带按钮的下一个选项卡

4 个答案: