JavaScript jQuery 个选项卡的函数

Question

过去 2 天我一直在谷歌搜索，试图弄清楚如何将事件添加到我的选项卡，但我无法使用任何解决方案。我对这些东西完全不知所措，所以请包括简单的解释。到目前为止，我有一些选项卡（我刚刚在其中复制并粘贴）：

<div id="tabs" role="tabpanel">
  <!-- Nav tabs -->
  <ul id="tabs" class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#tabs-1" aria-controls="Active" role="tab" data-toggle="tab">Active</a></li>
    <li role="presentation"><a href="#tabs-2" aria-controls="Inactive" role="tab" data-toggle="tab">Inactive</a></li>
    <li role="presentation"><a href="#tabs-3" aria-controls="Retired" role="tab" data-toggle="tab">Retired</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="Active"></div>
    <div role="tabpanel" class="tab-pane" id="Inactive"></div>
    <div role="tabpanel" class="tab-pane" id="Retired"></div>
  </div>
</div>

我还复制并粘贴了一个 JavaScript 函数，它看起来与我处理过的任何其他 JavaScript 函数不同，但它不起作用（永远不会触发警报语句）：

<script type="text/javascript" >
  $(function () {
    $('#tabs').tabs({
      activate: function (event, ui) {
        var $activeTab = $('#tabs').tabs('option', 'active');
        if ($activeTab == 1) {
          alert(Tab 1!);
        }

        if ($activeTab == 2){}
        if ($activeTab == 3){}  
      }
    });
  });
</script>

我正在使用 Spring MVC，我的目的是通过 JavaScript 函数将选项卡的值发送回控制器（因为我看不到其他方法）。基于该值，页面上的 table 填充了特定数据（在本例中为 'modules'）。我已经创建了一个控制器方法，但我不确定它应该是 get 还是 post 或者如何在其中获取选项卡值。这是我尝试的控制器方法代码：

    @RequestMapping(method = RequestMethod.POST, value = "/update")
public final String changeTab(final ModelMap model, @RequestParam(value = "id") String id) {
    System.out.println(id);
    //model.addAttribute("modules", moduleDao.sortStatus(status));
    return "module/admin";
}

我可以对我的代码做些什么来实现这个目标？我走在正确的轨道上吗？任何帮助深表感谢。

Answer 1

[编辑] 您的 HTML 中有些东西破坏了 jQuery 标签代码。

考虑这个 fiddle：http://jsfiddle.net/1r712od4/2/ - 它工作正常。

尝试从您的代码中取出不需要的 aria-controls 和类并重试。

你需要的 JS 是这样的：

$('#tabs').tabs({
    activate: function (event, ui) {
        var activeTab = ui.newTab.data("tabid");
        if (activeTab == 1) {
            alert ("Tab 1!");
        }
    }
});

至于 Spring 代码，其他人将不得不帮助您！

Answer 2

您创建选项卡时遇到了几个问题 html。附件是您修改后的代码，在我尝试时可以使用。您在选项卡 div 上缺少应与 href 匹配的 id 属性。希望这对 jQuery 部分有所帮助。

W.r.t 关于与 spring 绑定的第二个问题，现在您已将事件处理程序附加到选项卡，您可以触发 AJAX post 或获取从基于选项卡的事件处理程序并发送选项卡的值（我不确定你想发送什么值）。您可以从“http://api.jquery.com/jquery.ajax/”查看如何执行 get/post。你的问题并没有解释你期望从管制员那里得到什么样的回应，所以我无法帮助你。希望这有帮助。

<script type="text/javascript" >
  $(function () {
    $('#tabs').tabs({
      activate: function(event ,ui){
        var $activeTab = $('#tabs').tabs('option', 'active');
        if ($activeTab == 1) {
          alert("tab1");
        }
      }
    });
  });
</script>

<body>    
  <div id="tabs" role="tabpanel">
    <!-- Nav tabs -->
    <ul id="tabs" class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#tabs-1" aria-controls="Active" role="tab" data-toggle="tab">Active</a></li>
      <li role="presentation"><a href="#tabs-2" aria-controls="Inactive" role="tab" data-toggle="tab">Inactive</a></li>
      <li role="presentation"><a href="#tabs-3" aria-controls="Retired" role="tab" data-toggle="tab">Retired</a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
      <div id="tabs-1" role="tabpanel" class="tab-pane active" ></div>
      <div id="tabs-2" role="tabpanel" class="tab-pane" ></div>
      <div id="tabs-3" role="tabpanel" class="tab-pane" ></div>
    </div>
  </div>
</body>

JavaScript jQuery 个选项卡的函数

JavaScript function for jQuery tabs

html

javascript

jquery

spring-mvc