我有一个简单的带有jquery的Tab导航。每当单击新选项卡时,脚本会将当前导航列表元素添加到“currentNav”类中,并从先前选定的列表元素中删除它。现在我想在第二个列表元素获得类“currentNav”时更改母ul的背景。开始默认值是第一个列表元素具有此类。我的问题是,我不知道如何让jquery对这一变化做出反应..
这是导航的html
<ul id="AuktionenNav">
<li><a class="tabSelect one currentNav" href="#Tab0" rel="0">Auktionen starten</a></li>
<li><a class="tabSelect two" href="#Tab1" rel="1">Eingestellte Auktionen</a></li>
</ul>
到目前为止我的jquery
if($("ul#AuktionenNav li a.two").hasClass("currentNav")) {
$("ul#AuktionenNav").css("background-image", "url(../system/css/images/eingestellte_Auktionen.png)")
}
我感谢任何帮助! THX!
答案 0 :(得分:3)
设置触发器和绑定:
// When an <li> (NOT the first one) is clicked, tell the <ul>
$('ul#AuktionenNav li').not(':first-child').click(function(){
$(this).trigger('li_clicked');
});
// When the FIRST <li> is clicked, reset the background
$('ul#AuktionenNav li:first-child').click(function(){
$('ul#AuktionenNav').css("background-image", "url(../system/css/images/default.png)");
});
// Listen for an <li> click
$('ul#AuktionenNav').bind('li_clicked',function(){
$(this).css("background-image", "url(../system/css/images/eingestellte_Auktionen.png)");
});
我知道您的示例只有两个<li>
标记,但这样可以轻松扩展,同时保留第一个<li>
“重置器”
答案 1 :(得分:1)
这样做的一种方法是使用DOM突变事件:
$('ul').bind('DOMSubtreeModified',
function() {
$(this).closest('ul').addClass('red');
});
$('#toggle').click(
function(){
$('ul li:nth-child(2)').toggleClass('highlight');
return false;
});
答案 2 :(得分:0)
$('ul#AuktionenNav li a').click(function() {
$(this).addClass('currentNav');
if ($("ul#AuktionenNav li a.two").hasClass("currentNav")) {
$("ul#AuktionenNav").css("background-image", "url(../system/css/images/eingestellte_Auktionen.png")
}
});