CODEWITHSUNDEEP
jquerycss
mais-oui
mais-oui

Reputation: 2741

jQuery CSS styling stays the same even if the link is not the current one

I found this jQuery code on a forum: http://jsfiddle.net/nZLpk/8/ However, if I change the code to this http://jsfiddle.net/c5LTj/ (modifying $(this).css({'font-weight': 'bold', 'border-left': '5px solid #555554'}); the border will stay on the link even if that is not the selected one... Please help. Thanks!

Upvotes: 0

Views: 93

Answers (4)

Justin Summerlin
Justin Summerlin

Reputation: 5086

Because you need to add border-left to the css you're applying to all .atags elements before applying a bold style.

$(document).ready(function(){
    $('.atags').click(function(){
        $('.atags').css({'font-weight': '300', 'border-left': '0px'});
        $(this).css({'font-weight': 'bold', 'border-left': '5px solid #555554'});
    });
});

I would suggest doing this with CSS classes instead of directly specifying the styles in your code, and not using JavaScript within an HTML attribute: http://jsfiddle.net/c5LTj/3/.

Upvotes: 0

bfavaretto
bfavaretto

Reputation: 71918

You have to reset border-left on all elements with class atag the same way you are resetting their font-weight:

$(document).ready(function(){
    $('.atags').click(function(){
        $('.atags').css({"font-weight":"300", 'border-left': '0'});
        $(this).css({'font-weight': 'bold', 'border-left': '5px solid #555554'});
    });
});

http://jsfiddle.net/c5LTj/1/

If you just want to change the color, as you said the comment below:

$('.atags').css({"font-weight":"300", 'border-left-color': '#555554'});
$(this).css({'font-weight': 'bold', 'border-left-color': '#eee'});

You could also improve your code a lot if you remove showonlyone and the inline href="javascript:showonlyone instances, and do the work of showonlyone in the same place where you're changing the appearance of the links.

Upvotes: 2

Greg Pettit
Greg Pettit

Reputation: 10830

I appreciate that the people answering the question are answering the real question ("How do I fix this exact code so that my expected result appears?"), but I would take this opportunity to point out a different approach.

You should simply define a class with CSS that will encapsulate everything you need to happen, and then add that class with addClass() or remove it with removeClass(). A classic way of handling removing isn't even to track which element to remove it from, but to remove it from ALL before re-applying to only the necessary one (which I just noticed is more or less what the existing code is doing anyhow, except with styles instead of the class).

$(document).ready(function(){
    $('.atags').click(function(){
        $('.atags').removeClass('selected');
        $(this).addClass('selected');
    });
});

Upvotes: 2

eringen
eringen

Reputation: 381

You're not reseting the border,

 $('.atags').click(function(){
        $('.atags').css({"font-weight":"300", "border-left":0});
        $(this).css({'font-weight': 'bold', 'border-left': '5px solid #555554'});

})

should work fine

Upvotes: 0

Related Questions