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

Question

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

这是 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">

Answer 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 select 事件并设置一个标志以指示选择了哪个 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

希望这能回答你的问题