如何用jquery更改CSS?
我有以下由PHP动态生成的HTML。 当我单击活动时,它会变为非活动状态,反之亦然。
我为jquery操作添加了div class =’status’。 (我需要吗?没有这个div,我可以这样做吗?)
我想在单击活动时将CSS class =’status’更改为class =’inactive’,当我单击不活动时将CSS类更改为’active’,以便我可以更改颜色或添加bg图像等。
HTML
... ... 21 Kontakt /kontakt.html ... ...
我正在使用jquery,我需要一些指导。
有人能告诉我一些jquery代码吗?
–UPDATE–
有很多div有calss =’status’,所以我怎么能告诉jquery我想要改变我点击的css。
– 更新2–
我想检查值(活动/非活动)。 并将它的值添加为类。 ex如果它的值是活动的,那么添加css class =’active’,如果它处于非活动状态,则class =’inactive’等。我可以这样做吗? 或者你有其他建议我应该怎么做。
– 更新3–
感谢大家。 你们好棒。 我测试了一些代码。 但问题是,当我点击活动时,它会更改bg,但随后刷新页面以通过php / mysql更改为非活动状态。 所以这意味着每次我点击值(活动/非活动)更改。 所以我认为正如我在更新2中所述,添加css类可能是个好主意取决于值。 欢迎提出更多建议,我感谢他们。 (我还没有用AJAX做过……)
– 更新4 –
使用ID不是一个好主意,因为表是动态创建的。 我可以添加ID,但会添加更多代码。 所以我认为上课更好。
– 更新5–
我在这里提出我的问题。 如何添加类依赖于jquery的值
在此之后,我现在知道自己想做什么。
jQuery具有toggleclass(),removeClass()和addClass()的函数。 这些应该可以帮助你。
没有看到整个HTML有点难以建议选择器。 如果你为你的div(例如mydiv)分配了一个id,那么你可以拥有
$("#mydiv").removeClass('status').addClass('inactive');
或者只是翻转它们而不管:
$("#mydiv").toggleClass('status').toggleClass('inactive');
这很好地利用了链接
关于你的第一个问题,你可能会将该类移到封闭的
(尽管背景图像在那里并不总是很好)。
要使用jquery添加/删除类,您可以执行以下操作:
$('div.status').addClass('inactive'); $('div.status').removeClass('status');
或者,如果您希望在单击时触发它,请使用toggleClass
$('div.status', 'div.inactive').live("click", function(){ $(this).toggleClass("inactive").toggleClass("status"); });
这也只会触发您单击的特定div.status(或非活动)。
最简单的解决方案是使用jQuery中的内置切换函数,它允许您使用标准的jQuery选择器语法切换指定类的状态:
$(this).toggleClass("inactive");
有关详细信息,请参阅doc页面
.addClass()。removeClass ()
编辑:在响应您的更新时,您可以在div中使用onclick()函数来更改该特定div的类。
function changeClass() { $(this).toggleClass('status').toggleClass('inactive'); }
请测试该代码,但我认为这可能是您正在寻找的。
如果你不想要你提到的div,你可以删除它并选择td中的所有链接(或者将类添加到特定的td标签并调整选择器:$(’td.status’)以缩小选择范围只是那些)。
//Click Handler to toggle active state of all links descendant of all td tags $("td a").click(function(){ //add/remove inactive class and add/remove active smoothly over 1/2 second in total $(this).toggleClass("inactive, 250").toggleClass("active", 250); });
注意 :
$(“td a”)将选择所有标签后代。 只给孩子一个td的标签:
$("td > a")