在 Telerik TabStrip (MVC) 中，如何获取选定的选项卡索引？答案

【问题标题】：In Telerik TabStrip (MVC), how to get the selected tab index?在 Telerik TabStrip (MVC) 中，如何获取选定的选项卡索引？
【发布时间】：2012-11-01 04:33:07
【问题描述】：

我的页面看起来像这样，根据所选标签的索引，保存按钮的行为需要有所不同。

这是 jQuery 代码。

$("#btnSave").click(function () {
    var selectedTabIndex = $('#TabStrip').select().index()

    if (selectedTabIndex == 1) {
        InflowsSave();
    }

    if (selectedTabIndex == 2) {
        OutflowsSave();
    }

});

我在 Inspect Elements 控制台中输入了 $('#TabStrip').select().index()。选择哪个选项卡无关紧要，它总是返回 2。

>>> $("#TabStrip").select().index()

2

$("#TabStrip").select()

<ul class="t-reset t-tabstrip-items">
    <div id="TabStrip-1" class="t-content">
    <div id="TabStrip-2" class="t-content t-state-active" style="display:block">
    <div id="TabStrip-3" class="t-content">

【问题讨论】：

你在使用 Telerik Extensions for ASP.NET MVC 或 Kendo UI Wrappers for ASP.NET MVC 吗？
我正在使用 ASP.NET MVC。谢谢。

标签： javascript jquery asp.net-mvc telerik

【解决方案1】：

如果您使用的是 Telerik Extensions for ASP.NET MVC - 请查看以下有关 TabStrip 客户端事件处理的文档

TabStrip Client API & Events

从 JavaScript 中选择任何 Telerik Extension 控件的方法如下：

查看：

<%= Html.Telerik().TabStrip()
        .Name("TabStrip")
        .Items(items =>{/*items definition */})
%>

JavaScript：

<script type="text/javascript">
        function getTabStrip(){

            var tabStrip = $("#TabStrip").data("tTabStrip");

            return tabStrip;

        }
</script>

在您的场景中，为了知道选择了哪个选项卡，我建议您收听 tabstrip 选择事件并设置一个关于选择哪个 tabstrip 的标志。下面是处理客户端事件的代码：

查看：

<% 
  Html.Telerik().TabStrip()
  .Name("TabStrip")
  .Items(items =>{/*items definition */})
  .ClientEvents(events =>
    {
        events.OnSelect("Select");
        events.OnError("Error");
        events.OnContentLoad("ContentLoad");
        events.OnLoad(() =>
            {%>
                function(e) {
                /*TODO: actions when the control is loaded.*/
                // "this" is the tabstrip.
                }
            <%});
    })
  .Render(); %>

Javascript：

<script type="text/javascript">              
      function Select(e) {
              // "this" in this event handler will be the component.
              // the "e" is an object passed by the jQuery event trigger. 
      }
      function Error(e) {
        //code handling the error
      }
      function ContentLoad(e) {
        //code handling the content load
      }
</script>

如您所见，您可以在 Select() 方法中设置一个标志来选择哪个选项卡，然后在保存按钮中单击检查标志并采取相应措施

如果您浏览我在顶部提供的文档链接 - 它会告诉您控件公开的所有客户端事件和 API

希望这能回答你的问题

【讨论】：

恕我直言，这是技术上更正确/纯粹的答案。

【解决方案2】：

答案并不明显。活动选项卡具有 .t-item.t-state-active css 类。所以我们需要使用 jQuery 找到它。希望这对将来的某人有所帮助。

var selectedTabIndex = $("#TabStrip > ul").find(".t-item.t-state-active").index();

【讨论】：

【解决方案3】：

我是这样做的，对我来说它是有效的：

var selectedTabId = $("#TabStrip > ul").find(".t-item.t-state-active")[0].id;

【讨论】：