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”让类“选中”。如果将鼠标悬停在任何未选择的菜单上，则会突出显示效果。一旦他们点击另一个链接，“选定”类将从其他TD中删除并添加到新TD。

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

我也试过了，

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

但这会使TD突出显示。

感谢阅读。

Answer 1

您应该使用:hover pseudo-class。

它将为您处理鼠标过度/结束。

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()，它就是名字所暗示的。

Javascript更改类onclick

3 个答案: