1

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

菜单

这是 jQuery 代码。

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

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

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

});

我$('#TabStrip').select().index()在 Inspect Elements 控制台中输入。选择哪个选项卡无关紧要，它总是返回 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">
4

3 回答 3

4

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

TabStrip 客户端 API 和事件

从 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

希望这能回答你的问题

于 2012-11-01T06:07:51.977 回答
3

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

var selectedTabIndex = $("#TabStrip > ul").find(".t-item.t-state-active").index();
于 2012-11-01T08:54:45.377 回答
0

我这样做了，对我来说它正在工作：

var selectedTabId = $("#TabStrip > ul").find(".t-item.t-state-active")[0].id;
于 2017-08-18T09:09:56.757 回答