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控件”）。选择（）

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

在您的方案中，为了知道选择了哪个选项卡，我建议您收听标签选择事件，并设置一个标志，以设置选择哪个标签。以下是处理客户端事件的代码：

查看：

<% 
  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

希望这能回答你的问题

Answer 2

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

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

Answer 3

我是这样做的，对我而言，它正在发挥作用：

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

在Telerik TabStrip（MVC）中，如何获取选定的选项卡索引？

3 个答案: