javascript - jQuery 选项卡 : Get rid of 'previous' navigation button on second tab

Question

我正在对一些 jQuery 选项卡使用以下代码。要在三个选项卡之间导航，可以使用上一个和下一个按钮。在第一个选项卡上，“上一个”按钮被隐藏，在第三个选项卡上，“下一个”按钮被隐藏 - 这很好。如果可能的话，我需要删除第二个选项卡上的“上一个”按钮。

这是 html:

<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
Tab 1
</div>
<div id="tabs-2">
Tab 2
</div>
<div id="tabs-3">
Tab 3
</div>
</div>

<div class="Footer">
<div class="divleft">
    <button id="btnMoveLeftTab"  type="button" value="Previous Tab"    
text="Previous Tab">Previous Tab
    </button>
</div>
<div class="divright">
    <button id="btnMoveRightTab" type="button" value="Next Tab"  text="Next   
Tab">Next Tab
    </button>
</div>
</div>
<div class="Clearboth"></div>

用于选项卡的脚本:

  $(function () { 
//Get the first tab in document and will assume will always use first one
var selectedTab = $(document).find('div[class^="ui-tabs"]').first();

//Navigation button, select tab when button click.
$(".Footer").on('click', ':button', function () {
    var selected = selectedTab.tabs("option", "active");
    if (this.id == "btnMoveLeftTab") {
        if (selected >= 1) {
            selectedTab.tabs("option", "active", selected - 1);
        }
    } else {
        selectedTab.tabs("option", "active", selected + 1);
    }
});

//Tab activated, only display next on first tab, and previous in last tab
selectedTab.tabs({

    activate: function (event, ui) { 
        var active = selectedTab.tabs("option", "active");
        var selected = selectedTab.tabs("option", "active");

        if (active == 0) {
            $("#btnMoveLeftTab").hide();
        }else if 
        (selectedTab.find("li:not(li[style='display:none'])").size()-1 == selected){
            $("#btnMoveRightTab").hide();
        }else{
            $("#btnMoveLeftTab").show();
            $("#btnMoveRightTab").show();
        }

    }
});

//First time loading hide the previous button
$("#btnMoveLeftTab").hide();
});

我尝试更改 $("#btnMoveLeftTab").show();到 $("#btnMoveLeftTab").hide();但这意味着我失去了第三个选项卡下的“上一个”按钮，我需要保留该按钮。

Answer 1

使用它作为您的 activate 函数应该会有所帮助。

activate: function (event, ui) { 
    var active = selectedTab.tabs("option", "active");
    var selected = selectedTab.tabs("option", "active");

    switch(active) {
        case 0:
        case 1: $("#btnMoveLeftTab").hide();
                $("#btnMoveRightTab").show();
                break;
        case 2: $("#btnMoveLeftTab").show();
                $("#btnMoveRightTab").hide();
                break;
    }
}

可运行的代码片段:

$("#tabs").tabs({
    activate: function(event, ui) {
      var active = $('#tabs').tabs('option', 'active');
      $("#tabid").html('the tab id is ' + $("#tabs ul>li a").eq(active).attr("href"));

    }
  }

);

$(function() {
  //Get the first tab in document and will assume will always use first one
  var selectedTab = $(document).find('div[class^="ui-tabs"]').first();

  //Navigation button, select tab when button click.
  $(".Footer").on('click', ':button', function() {
    var selected = selectedTab.tabs("option", "active");
    if (this.id == "btnMoveLeftTab") {
      if (selected >= 1) {
        selectedTab.tabs("option", "active", selected - 1);
      }
    } else {
      selectedTab.tabs("option", "active", selected + 1);
    }
  });

  //Tab activated, only display next on first tab, and previous in last tab
  selectedTab.tabs({

    activate: function(event, ui) {
      var active = selectedTab.tabs("option", "active");
      var selected = selectedTab.tabs("option", "active");

      switch (active) {
        case 0:
        case 1:
          $("#btnMoveLeftTab").hide();
          $("#btnMoveRightTab").show();
          break;
        case 2:
          $("#btnMoveLeftTab").show();
          $("#btnMoveRightTab").hide();
          break;
      }
    }
  });

  //First time loading hide the previous button
  $("#btnMoveLeftTab").hide();
});

body {
  background-color: #eef;
}
#tabs {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}
/* Note that jQuery UI CSS is loaded from Google's CDN in the "Add Resources" pane to the left.  Normally this would be done in your <head> */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" rel="stylesheet" />
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a>
    </li>
    <li><a href="#tabs-2">Proin dolor</a>
    </li>
    <li><a href="#tabs-3">Aenean lacinia</a>
    </li>
  </ul>
  <div id="tabs-1">
    Tab 1
  </div>
  <div id="tabs-2">
    Tab 2
  </div>
  <div id="tabs-3">
    Tab 3
  </div>
</div>
<div id="tabid"></div>

<div class="Footer">
  <div class="divleft">
    <button id="btnMoveLeftTab" type="button" value="Previous Tab" text="Previous Tab">Previous Tab
    </button>
  </div>
  <div class="divright">
    <button id="btnMoveRightTab" type="button" value="Next Tab" text="Next   
Tab">Next Tab
    </button>
  </div>
</div>
<div class="Clearboth"></div>