为什么 kendo 选项卡条没有获取 html 中定义的选项卡 ID答案

【问题标题】：Why kendo tab strip is not getting the tab id defined in html为什么 kendo 选项卡条没有获取 html 中定义的选项卡 ID
【发布时间】：2022-01-19 22:29:46
【问题描述】：

我有这段代码，它在更新我的剑道版本之前就可以使用。我要做的是根据选定的选项卡选项执行一些其他代码，这就是我所拥有的：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script></head>
<body>
  <div id="tabs1">
    <ul>
      <li id="tabs1-user" style="display:none;">Bullets</li>
      <li id="tabs1-superUser">Features</li>
      <li id="tabs1-details">Details</li>
      <li id="tabs1-dashboard">Info</li>
    </ul>
  </div>

  <script>
        $(document).ready(function () {
      setTabs();
    });
    
    function setTabs() {
        var t1 = $("#tabs1").kendoTabStrip({
                animation: { open: { duration: 0, effects: "fadeIn" }, close: { duration: 0, effects: "fadeOut" } },
                select: function (e) {
                    console.log(e);
        
                    if (e && e.item) {
                        switch (e.item.id) {
                            case 'tabs1-user': break;
                            case 'tabs1-details': getDetails(); break;
                        }
                    }
                }
            });

            t1.select(0);
            $("#tabs1").show(); 
    }
    
    function getDetails() {
        console.log('calling method to retrieve details...'); 
    }
    </script>
</body>
</html>

这里还有一个DOJO

如您所见，当我点击详细信息选项卡时，我希望发送 ID tabs1-details，但我得到的是 tabs1-tab-3。 p>

我该如何解决这个问题？我需要在其他地方定义标签名称吗？

【问题讨论】：

标签： javascript jquery kendo-ui kendo-tabstrip

【解决方案1】：

看起来 Kendo Tabstrip 覆盖了您创建的 ID。在这种情况下，我的建议是使用data 属性。类似于data-id。示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.1207/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.3.1207/js/kendo.all.min.js"></script></head>
<body>
  <div id="tabs1">
    <ul>
      <li data-id="tabs1-user" style="display:none;">Bullets</li>
      <li data-id="tabs1-superUser">Features</li>
      <li data-id="tabs1-details">Details</li>
      <li data-id="tabs1-dashboard">Info</li>
    </ul>
  </div>

  <script>
        $(document).ready(function () {
      setTabs();
    });
    
    function setTabs() {
        var t1 = $("#tabs1").kendoTabStrip({
                animation: { open: { duration: 0, effects: "fadeIn" }, close: { duration: 0, effects: "fadeOut" } },
                select: function (e) {
                    console.log(e);
        
                    if (e && e.item) {
                        switch ($(e.item).attr('data-id')) {
                            case 'tabs1-user': break;
                            case 'tabs1-details': getDetails(); break;
                        }
                    }
                }
            });

            t1.select(0);
            $("#tabs1").show(); 
    }
    
    function getDetails() {
        console.log('calling method to retrieve details...'); 
    }
    </script>
</body>
</html>

使用上面的代码，当你点击Details时，控制台日志中会打印“calling method to retrieve details...”。

【讨论】：