如何與Jquery鏈接功能

我想使可點擊鏈接處於活動狀態（邊框和鏈接a顏色）。邊框切換點擊鏈接，但鏈接的顏色不變。我想活動鏈接爲黃色#eab000（邊框和鏈接a顏色）。和非活動鏈接是黑色404040如何與Jquery鏈接功能

我試圖

$('ul li').first().css({ 
    'border':'1px solid #eab000', 
    }).find('a').css({ 
    'color':'#eab000' 
    }); 

    $('ul li').on('click',function(e){ 
    e.preventDefault(); 

    $(this).css({ 
    'border':'1px solid #eab000', 
    }).siblings('li').css({ 
    'border':'none', 
    }).find('a').css({ 
    'color':'#eab000' 
    }); 

});

來源

2015-11-16 Daniel

我認爲問題在於您使用的是 .find（'a'），它將所有鏈接變爲黃色，將該CSS應用於所有錨點 –

那麼如何將activeItem更改爲已點擊的li上？

$('ul li').on('click',function(e){ 
     e.preventDefault(); 
     $(this).siblings().removeClass("activeItem"); 
     $(this).addClass("activeItem"); 
    });

的jsfiddle here

甚至更好，如果你是在給鏈接：

$('ul li').on('click',function(e){ 
     e.preventDefault(); 
     $(this).addClass("activeItem").siblings().removeClass("activeItem"); 
    });

Link

我要指出，我已經添加了下面的CSS：

ul li.activeItem 
{ 
    border: 1px solid #eab000; 
} 
ul li.activeItem a 
{ 
    color:#eab000; 
}

來源

2015-11-16 12:24:42

（邊框和鏈接a顏色），你可以使用

$('ul li').first().css({ 
    'border':'1px solid #eab000', 
    }).find('a').css({ 
    'color':'#eab000' 
    }); 

    $('ul li').on('click',function(e){ 
     e.preventDefault(); 

     $(this).css({ 
     'border':'1px solid #eab000', 
     }).find('a').css({ 
      'color' : '#eab000' 
     }).parent().siblings('li').css({ 
     'border':'none', 
     }).find('a').css({ 
     'color':'#404040' 
     }); 

    });

你用「 .siblings「作爲」非活動「鏈接，然後將它們的錨點顏色設置爲活動顏色。通過在使用「兄弟姐妹」然後使用「父母」之前設置錨點，您可以在鏈條中保持一致的水平。

見你的小提琴，固定，here

然而，特定的顏色代碼中的使用使得這種結構有點脆。如其他示例中所示，添加/刪除類是一個更可持續的解決方案。

來源

2015-11-16 12:24:42

我爲您在遵循簡單規範方面缺乏能力而投降 – musefan

@musefan - 它的工作，並鏈接 –

想想出來的各種方法的，因此這是怎麼回事進入下一個：

css =出來：一樣，所以忽略清晰

this =出：在li點擊
siblings =在：利，出：其他li S上的li的點擊
find =：所述其他li S，出來：所有a S下的其他li小號

，如果你移動的find起來：

$(this).css({ 
'border':'1px solid #eab000', 
}).find('a').css({ 
'color':'#eab000' 
}).siblings('li').css({ 
'border':'none', 
});

匹配.first那麼一會的工作，但兄弟姐妹不會像現在：

this =出：在li點擊
find =在：li點擊，out：全部a s點擊下li
siblings =在：在「A」，出來：無（假定）

那麼理想情況下，你想一些辦法「取消」以前find兄弟姐妹之前，幸運的是jQuery有眼前這個：.end()

可以將此到原始（找到a然後回去找兄弟姐妹）或（找兄弟姐妹，然後回去找a）

這與缺少額外的顏色變化

$(this).css({ 
'border':'1px solid #eab000', 
}).find('a').css({ 
'color':'#eab000' 
}) 
.end() 
.siblings('li').css({ 
'border':'none', 
}).find('a').css({ 
'color':'#404040' 
});

來源

2015-11-16 14:07:46

如何與Jquery鏈接功能

回答

相關問題