Question

这是我的标记，来自我的子布局：

<div class="main-nav">
        <a id="tabmovies" href="#" class="main-nav-tab active">Movies</a>
        <a id="tabtheatres" href="#" class="main-nav-tab">Theatres</a>
    </div>
</div>

这是我的.js ...警告表示点击功能正在运行

  // Toggle between movies and theatres 
    $("#tabmovies").click(function () {
        alert("you have clicked movies");
        $("tabmovies").addClass("active");
        $("tabtheatres").removeClass("active");

    });

    $("#tabtheatres").click(function () {
        alert("you have clicked theatres");
        $("tabmovies").removeClass("active");
        $("tabtheatres").addClass("active");

    });

但未添加或删除“活动”类。我错过了什么吗？

Answer 1

要在jquery中按ID选择元素，请使用"#theID"作为选择器。

更改

 $("tabtheatres").addClass("active");

到

$("#tabtheatres").addClass("active");

Answer 2

试试这个，

$("#tabmovies").click(function() {
    alert("you have clicked movies");
    $("#tabmovies").addClass("active");
    $("#tabtheatres").removeClass("active");

});

$("#tabtheatres").click(function() {
    alert("you have clicked theatres");
    $("#tabmovies").removeClass("active");
    $("#tabtheatres").addClass("active");

});

您需要在ID选择器之前添加#。

FIDDLE DEMO

Answer 3

更改您的代码如下：

// Toggle between movies and theatres 
    var $tabmovies = $("#tabmovies"),
        $tabtheatres = ("#tabtheatres")
    $tabmovies.click(function () {
        alert("you have clicked movies");
        $tabmovies.addClass("active");
        $tabtheatres.removeClass("active");

    });

    $tabtheatres.click(function () {
        alert("you have clicked theatres");
        $tabmovies.removeClass("active");
        $tabtheatres.addClass("active");

    });

<强> DEMO

您没有选择任何内容，因为您应该正确指定选择器。如果id选择器使用#符号。对于类选择器，请使用.了解jquery选择器here。并避免在您的代码中进行多次查询。选择一次并多次使用参考。它会为您带来性能提升。

为什么我的click函数不是addClass或removeClass

3 个答案: