Question

我正在使用jquery在我的GUI上创建标签。我的问题是，我想在点击其中一个标签时执行一个功能。我从jquery站点找到了以下信息。然而，我是jquery的新手，我无法理解“.selector”的含义。如何识别特定选项卡的名称？我只有整个标签集的ID。此外，jquery网站还有两段代码。我可以选择使用其中任何一种吗？谢谢！

直接来自jquery UI网站：

单击选项卡时会触发此事件。

Code examples
Supply a callback function to handle the select event as an init option.
$( ".selector" ).tabs({
   select: function(event, ui) { ... }
});
Bind to the select event by type: tabsselect.
$( ".selector" ).bind( "tabsselect", function(event, ui) {
  ...
});

Answer 1

首先，选择器基本上是选择DOM元素的一种方式。基本选择器遵循CSS和常规JavaScript格式。＃为id和。对于班级

所以在jQuery中，要选择id为“my-div”的div，你会这样做：

$('#my-div')

这会抓取jQuery节点，使用它可以根据需要修改节点。在jQuery文档中更详细地阅读有关选择器的内容。

现在，对于您的标签问题......您可能想要“显示”事件，而不是“选择”，以便您可以捕获您输入的标签。以下示例将设置几个选项卡，然后提醒您刚刚单击哪个选项卡的索引。

HTML

<div class="demo">

    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
            <li><a href="#tabs-3">Aenean lacinia</a></li>
        </ul>
        <div id="tabs-1">
            <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
        </div>
        <div id="tabs-2">
            <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
        </div>
        <div id="tabs-3">
            <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
            <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
        </div>
    </div>

</div><!-- End demo -->

的JavaScript

$(function() {
    $( "#tabs" ).tabs({
        show : function(event,ui) {
            alert($(this).tabs('option','selected'));
        }
    });
});

要解释演示...您选择ID为“tabs”的DOM元素，然后将jQuery UI插件“tabs”应用于它。这会将HTML标记修改为美观，并为您提供事件系统，为您提供灵活性和对UI的控制。 “show”选项是一个回调函数，只要显示新选项卡，就应该触发该函数。在回调中，我们使用jQuery UI API再次选择选项卡（通过此选项），然后获取所选选项卡的索引。当然，我们提醒一下。

希望这会帮助你，祝你好运。

Answer 2

以下是如何对标签使用jquery_ui select事件的说明（http://jqueryui.com/demos/tabs/#event-select）

$('#mytabs').tabs({
    select: function(event, ui) {  
        if ($(ui.tab).parent().hasClass("tab-one")) { 
            alert ("click tab #1"); 
        }
        if ($(ui.tab).parent().hasClass("tab-two")) { 
            alert ("click tab #2"); 
        }
    }
}); 


<div id="mytabs">
    <ul>
        <li class="tab-one"><a href="#onepane">one</a></li>
        <li class="tab-two"><a href="#twopane">two</a></li>
    </ul>
    <div id="onepane">uno</div>
    <div id="twopane">dos</div>
</div>

如何使用jquery选项卡点击功能？

2 个答案: