Javascript更改类onclick [英] Javascript change class onclick

问题描述

无论如何，我在顶部有一张桌子，我只是想用javascript / ajax / jQuery来处理这个问题。 ;

 < table align =centerclass =thinlinewidth =600border =1 cellpadding =2bordercolor =black> 
< tr class =subtopicstyle =font-size：15px;> 
< td>< a onClick =javascript：ShowNewTickets（）>新票< / a>< / td> 
< td>< a onClick =javascript：ShowYourTickets（）>您的票据< / a>< / td> 
< td>< a onClick =javascript：ShowPuplicTickets（）>公共门票< / a>< / td> 
< / tr> 
< / table> 
  

当页面加载时，我想让新票让这个类选中。如果他们将鼠标悬停在任何未选择的菜单上，则它具有突出显示的效果。一旦他们点击另一个链接，选择类将从另一个TD中删除并添加到新的TD。

我已经尝试了onmouseover和onmouseout来做突出显示效果，但当它涉及到已经突出显示的链接时，它会搅乱。

我也试过，

<$ （$（this）.hasClass（'selected'）== false）{（$'code> $（'。off'）。
$（this）.removeClass（'off'）。addClass（'highlight'）;
}
}）;

但是，这样可以突显TD。

感谢您的阅读。

伪类来处理高亮效果。要处理selected类，你可以这样做：
$ b

  $（'。subtopic'）。on（'点击'，'a'，函数（e）{
 $（'。subtopic a'）。removeClass（'selected'）; //从所有链接中删除类
 $（this）。 addClass（'selected'）; //将它添加到点击链接
} 
  

注我使用新的jQuery函数 .on（） < /。>而不是.click，.live或.delegate .on（）方法的作用是确保只将事件绑定到.subtopic行中的链接。使用.on（）还可以保证事件仍然会在向DOM中动态添加新链接时触发。

Im just trying to get to grips with javascript / ajax / jQuery so Im building a ticket system for my website.

Anyway, I have a table at the top of the page;

    <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>

When the page loads I want "New Tickets" to have the class "selected". If they hover the mouse over any of the unselected menus then it has a highlighted effect. Once they click onto another link the "selected" class will be removed from the other TD and added to the new TD.

I have tryed onmouseover and onmouseout to do the highlight effect but it messes up when it comes to the link which is already highlighted.

I have also tryed,

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

But that then keeps the TD highlighted.

Thanks for reading.

解决方案

As Sergio Tulentsev mentioned, you should use the :hover pseudo class to handle the highlight effect. To handle the "selected" class, you could do something like this:

$('.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
}

Note that I am using the new jquery function .on() instead of .click, .live or .delegate. The way .on() works, you will make sure you only bind events to the links in the .subtopic row. Using .on() also guarantees your events will still fire when adding new links dynamically to the DOM.

这篇关于Javascript更改类onclick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！