Kendo UI 点击标签条 1

Question

我只想在单击 Tab 1 时创建一个 alert，但它似乎不起作用。在此感谢您的帮助。

<div id="tabstrip">
  <ul>
    <li>Tab 1</li>
    <li>Tab 2</li>
  </ul>
  <div>
 <div>Content 1</div>
  </div>
  <div>Content 2</div>
</div>

<script>
  var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");

  tabStrip.select("li:first");  
  $("#tabstrip").on("click", function() {
      tabStrip.select(1);   
      alert("hi");
  });
</script>

full demo in here

Answer 1

目前您正在为整个标签条设置onclick 功能。像这样尝试：

$("#tabstrip li:first").on("click", function() {
    alert("hi");
});

Answer 2

此外，您可以随时使用 onSelect 事件函数来识别所选元素。

var onSelect = function(e) {
        var a = e.item.innerText;
        console.log(e.item.innerText);
        if(a ==="Tab 1"){
          console.log("Tab 1 selected");
        }


     };

https://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip/events/select

Kendo UI 点击标签条 1

Kendo UI Tabstrip 1 on click

kendo-ui

kendo-grid