JavaScript变更类别onclick

Question

我只是想掌握javascript / ajax / jQuery，所以我为我的网站构建了票务系统。

无论如何，我在页面顶部有一张桌子。

    <table align="center" class="thinline" width="600" border="1" cellpadding="2" bordercolor="black">
    <tr class="subtopic" style="font-size: 15px;">
        <td><a onClick="javascript: ShowNewTickets()">New Tickets</a></td>
        <td><a onClick="javascript: ShowYourTickets()">Your Tickets</a></td>
        <td><a onClick="javascript: ShowPuplicTickets()">Public Tickets</a></td>
    </tr>
</table>

当页面加载时，我希望“ New Tickets”具有“ selected”类。 如果他们将鼠标悬停在任何未选择的菜单上，则它将具有突出显示的效果。 一旦他们单击另一个链接，“选定”类将被从另一个TD删除，并添加到新TD。

我已经尝试过onmouseover和onmouseout来做突出显示效果，但是当涉及到已经突出显示的链接时，它就变得混乱了。

我也尝试过

    $('.off').live('mouseenter', function() {
    if ($(this).hasClass('selected') == false) {
        $(this).removeClass('off').addClass('highlighted');
    }
});

但这随后使TD保持突出状态。

谢谢阅读。

Answer 1

您应该使用:hover伪类 。

它将为您处理鼠标移/移。

Answer 2

正如Sergio Tulentsev所提到的，您应该使用:hover伪类来处理突出显示效果。 要处理“选定的”类，您可以执行以下操作：

$('.subtopic').on('click', 'a', function(e) {
    $('.subtopic a').removeClass('selected'); // remove the class from all the links
    $(this).addClass('selected'); // add it to the clicked link
}

请注意，我使用的是新的jquery函数.on()而不是.click，.live或.delegate。 .on（）的工作方式，请确保仅将事件绑定到.subtopic行中的链接。 使用.on（）还可以确保在向DOM动态添加新链接时，事件仍然会触发。

Answer 3

签出.toggleClass（） ，它按照名称提示进行操作。