下一个和上一个按钮功能不起作用

时间:2017-08-28 05:53:03

标签: javascript jquery tabs

我创建了带有下一个和上一个按钮功能的标签内容。但是下一个和上一个按钮功能不起作用。我使用了jquery.min.js版本1.11.1版本。我已经创建了如下代码段。我已经提到this question并创建了答案中提到的功能。但它还是不起作用。

$("ul.kyc-tab-list li a").click(function () {
        $("ul.kyc-tab-list li a").removeClass("active");
        $(this).addClass("active");
    });

    $(".tab-btn1").click(function () {
        $("#tab1").show();
        $("#tab2").hide();
        $("#tab3").hide();
        $("#tab4").hide();
        $("#tab5").hide();
    });

    $(".tab-btn2").click(function () {
        $("#tab1").hide();
        $("#tab2").show();
        $("#tab3").hide();
        $("#tab4").hide();
        $("#tab5").hide();
    });

    $(".tab-btn3").click(function () {
        $("#tab1").hide();
        $("#tab2").hide();
        $("#tab3").show();
        $("#tab4").hide();
        $("#tab5").hide();
    });

    $(".tab-btn4").click(function () {
        $("#tab1").hide();
        $("#tab2").hide();
        $("#tab3").hide();
        $("#tab4").show();
        $("#tab5").hide();
    });

    $(".tab-btn5").click(function () {
        $("#tab1").hide();
        $("#tab2").hide();
        $("#tab3").hide();
        $("#tab4").hide();
        $("#tab5").show();
    });
    
    
    $('#btnNext').click(function () {


        // get current tab

        var currentTab = $(".tab.active");

        // get the next tab, if there is one
        var newTab = currentTab.next();

        // at the end, so go to the first one
        if (newTab.length === 0) {
            newTab = $(".tab").first();
        }

        currentTab.removeClass('active');
        // add active to new tab
        newTab.addClass('active');
    });

    $('#btnPrevious').click(function () {
        // get current tab
        var currentTab = $(".tab.active");

        // get the previous tab, if there is one
        var newTab = currentTab.prev();

        // at the start, so go to the last one
        if (newTab.length === 0) {
            newTab = $(".tab").last();
        }

        currentTab.removeClass('active');
        // add active to new tab
        newTab.addClass('active');
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>

<section>

  <div class="kyc-tab-wrapper">
                      <ul class="kyc-tab-list">
                        <li>
                            <a href="javascript:void(0);" class="tab active tab-btn1"><span>01</span>Customer</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" class="tab tab-btn2"><span>02</span>Contact / Promotors</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" class="tab tab-btn3"><span>03</span>Bank / Business</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" class="tab tab-btn4"><span>04</span>Other</a>
                        </li>
                        <li>
                            <a href="javascript:void(0);" class="tab tab-btn5"><span>05</span>Finish</a>
                        </li>
                    </ul>
                    
                       <div class="kyc-tab-content" id="tab1">
                       
                       tab 1
                       </div>
                                <div class="kyc-tab-content" id="tab2">
                        tab 2
                       </div>         
                                </div>
                                
                                     <div class="kyc-tab-content" id="tab3">
                                         tab 3
                       
                                     </div>
                                                  <div class="kyc-tab-content" id="tab4">
                                                  tab 4
                                                  </div>
                                                       <div class="kyc-tab-content" id="tab5">
                                   
                                   tab 5</div>
                                                       
                                                         <div class="kyc-tab-form-btn-wrap">
                        <button id="btnPrevious" style="display:none">  Previous</button> 
                        <button id="btnNext">Next </button>
                    </div>
                       </div>
  </div>
</section>


</div>

2 个答案:

答案 0 :(得分:2)

要使Next按钮起作用,请更改以下行。

// get current tab
var currentTab = $(".tab.active").closest("li");
//get the next tab, if there is one
var newTab = currentTab.next().find("a.tab");
//...
currentTab.find(".tab").removeClass('active');

Prev按钮也进行类似的更改。

// get current tab
var currentTab = $(".tab.active").closest("li");
// get the previous tab, if there is one
var newTab = currentTab.prev().find("a.tab");
//...
currentTab.find(".tab").removeClass('active');

<强> Fiddle Demo

您的代码中的问题是您没有正确关注下一个或上一个a标记。

答案 1 :(得分:1)

所以这些是我对你的代码所做的改变:

  1. 首先,kyc-tab-wrapper的结束标记在 tab2之后关闭 - 修正了。

  2. 您可以将其包含在第一个侦听器中,而不是让多个侦听器切换选项卡:

    $(".kyc-tab-content").hide();
    $($(this).attr('class').split(' ').find(function(e) {
        return e.startsWith('tab-btn');
    }).replace('tab-btn', '#tab')).show();
    
  3. next 之前的按钮无法正常运行prevnext a - 你应该用li来做,因为li是兄弟姐妹:

    currentTab.closest('li').prev().find('a');
    currentTab.closest('li').next().find('a');
    
  4. 您可以触发点击标签,而不是再次登录。

  5. 同时添加初始触发器,以便在使用$(".tab.active").trigger('click')

  6. 加载页面时显示第一个标签

    见下面的演示:

    $("ul.kyc-tab-list li a").click(function() {
      $("ul.kyc-tab-list li a").removeClass("active");
      $(this).addClass("active");
      /* Do this instead of multiple listeners */
      $(".kyc-tab-content").hide();
      $($(this).attr('class').split(' ').find(function(e) {
        return e.startsWith('tab-btn');
      }).replace('tab-btn', '#tab')).show();
    });
    
    // active tab load initially
    $(".tab.active").trigger('click');
    
    
    $('#btnNext').click(function() {
      var currentTab = $(".tab.active");
      var newTab = currentTab.closest('li').next().find('a');
      if (newTab.length === 0) {
        newTab = $(".tab").first();
      }
      newTab.trigger('click');
    });
    
    $('#btnPrevious').click(function() {
      var currentTab = $(".tab.active");
      var newTab = currentTab.closest('li').prev().find('a');
      if (newTab.length === 0) {
        newTab = $(".tab").last();
      }
      newTab.trigger('click');
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div>
      <section>
        <div class="kyc-tab-wrapper">
          <ul class="kyc-tab-list">
            <li>
              <a href="javascript:void(0);" class="tab active tab-btn1"><span>01</span>Customer</a>
            </li>
            <li>
              <a href="javascript:void(0);" class="tab tab-btn2"><span>02</span>Contact / Promotors</a>
            </li>
            <li>
              <a href="javascript:void(0);" class="tab tab-btn3"><span>03</span>Bank / Business</a>
            </li>
            <li>
              <a href="javascript:void(0);" class="tab tab-btn4"><span>04</span>Other</a>
            </li>
            <li>
              <a href="javascript:void(0);" class="tab tab-btn5"><span>05</span>Finish</a>
            </li>
          </ul>
          <div class="kyc-tab-content" id="tab1">tab 1</div>
          <div class="kyc-tab-content" id="tab2">tab 2</div>
          <div class="kyc-tab-content" id="tab3">tab 3</div>
          <div class="kyc-tab-content" id="tab4">tab 4</div>
          <div class="kyc-tab-content" id="tab5">tab 5</div>
          <div class="kyc-tab-form-btn-wrap">
            <button id="btnPrevious">  Previous</button>
            <button id="btnNext">Next </button>
          </div>
        </div>
      </section>
    </div>