KendoUI Tabstrip 根据 url 打开一个标签答案

【问题标题】：KendoUI Tabstrip open a tab based on urlKendoUI Tabstrip 根据 url 打开一个标签
【发布时间】：2012-11-26 21:42:47
【问题描述】：

是否有一些内置功能可以根据 url 打开标签页（kendoUI TabStrip）？还是我必须编写一些自定义函数来读取 url 并在此基础上做一些工作？

【问题讨论】：

标签： kendo-ui

【解决方案1】：

我认为你必须解析 URL，然后调用标签条上的activateTab() 函数来打开你想要的标签。

【讨论】：

我会在我回去工作的时候试试这个，并告诉你它是否有效。
您可以获取选项卡的 ID 并将其设置为活动或编写一个函数来更改显示，如果您想隐藏/显示。感谢您的帮助。

【解决方案2】：

检查这是否是您要查找的内容：

HTML：

<div id="tabstrip">
    <ul>
        <li class="k-state-active">Page 1</li>
        <li>Page 2</li>
        <li>Page 3</li>
    </ul>
</div>

JavaScript：

$(document).ready(function () {
    $("#tabstrip").kendoTabStrip({
        contentUrls:[
            "page1.html",
            "page2.html",
            "page3.html"
        ]
    });
});

它创建了 3 个标签 kendoTabStrip，每个标签的内容是 page1.html、page2.html 和 page3.html。

【讨论】：

实际上我想要做的是根据 url 动态打开选项卡。例如，如果我发送了一封电子邮件并且链接说 page2，那么在 url 中它会像 www.example.com?page2。当它被处理时，它会自动打开与 page2 对应的选项卡。
嗨@OnaBai，对于这个解决方案，如何绑定角度控制器？我尝试在每个 html 文件中绑定控制器，但没有运气，绑定不起作用。

【解决方案3】：

如果要将活动标签设置为呈现状态的解决方案（页面加载时不带Js）

如果您使用模板系统（例如 groovy for play framework 1.x），您可以编写如下内容：

<ul>
  <li class="#{if params.get('ref') == 'application'}k-state-active#{/if}">Application</li>
  <li class="#{if params.get('ref') == 'payment'}k-state-active#{/if}">Payment</li>
</ul>
<div>
  content for tab application
</div>
<div>
  content for tab payment
</div>

注意： params.get('ref') 表示请求的获取参数，名称为：'ref'

如果您使用 url 打开此页面： someting.dev/dashboard?ref=payment

您将获得激活的付款标签

【讨论】：