Question

我在一些jQuery选项卡中使用以下代码。要在三个选项卡中的每一个之间导航，可以使用上一个和下一个按钮。在第一个标签上，＆＃39; previous＆＃39;按钮被隐藏，在第三个标签上，＆＃39; next＆＃39;按钮被隐藏 - 这很好。我需要删除之前的＆＃39;如果可能，在第二个选项卡上按钮。

这是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();
});

我尝试过改变$（＆＃34;＃btnMoveLeftTab＆＃34;）。show（）; to $（＆＃34;＃btnMoveLeftTab＆＃34;）。hide（）;但这意味着我失去了以前的＃39;我的第三个标签下的按钮，我需要保留。

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

Runnable code snippet：

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

jQuery标签：摆脱以前的＆＃39;第二个选项卡上的导航按钮

1 个答案: