Add and remove styles to links, jquery

[klemme]

I dont have the best knowledge to js ot Jquery, so here goes:

I have some links, that returns false when clicked on.

But still i want to add a class to the element being clicked, because it is kind of a tab thingie in a div, so for usability..

At first when the page loads, i am doing something i think is a hopeless way? Because i want to add styles to the first tab, as it is showing info on page load:

window.onload = aktiv_sub;
function aktiv_sub() {
 document.getElementById('sub_id_1').style.color='#FFF';
 document.getElementById('sub_id_1').style.height='35px';
 document.getElementById('sub_id_1').style.backgroundColor='#900';

 document.getElementById('sub_id_4').style.color='#FFF';
 document.getElementById('sub_id_4').style.height='35px';
 document.getElementById('sub_id_4').style.backgroundColor='#096';

 document.getElementById('sub_id_7').style.color='#FFF';
 document.getElementById('sub_id_7').style.height='35px';
 document.getElementById('sub_id_7').style.backgroundColor='#069';

 document.getElementById('sub_id_10').style.color='#FFF';
 document.getElementById('sub_id_10').style.height='35px';
 document.getElementById('sub_id_10').style.backgroundColor='#664798';
}

This leaves me with a problem, when the other tabs are clicked:
I can add styles, but they do not get removed from the previously clicked link:

$(function() {
$(".sub").click(function() {
    $(this).css("color", "white"); 
    $(this).css("height", "35px"); 
    $(this).css("background", "#990000");
// And then remove the styles, or write other styles to the links that are not active:
});
});

// I know i am hopeless // :-)

How can i turn this into a simple jquery function, that does all the magic??

Klemme

[Dani]

Essentially you want to select every item in the list except for the one being clicked on, right?

If they're all at the same level in the document tree, and all of the tabs are the only thing at that level of the document tree, you can try $(this).siblings().css({'color': 'white', 'height': '35px', 'background': '#990000'});

By "the same level of the document tree" I mean:

<div>
    <span>Foo</span>
    <span>Bar</span>
    <span>Baz</span>
    <span>Bat</span>
</div>
<div>
    <span>Foo 2</span>
    <span>Bar 2</span>
    <span>Baz 2</span>
    <span>Bat 2</span>
</div>    

The first group of spans are siblings, and the second group of spans are siblings. Additionally, the two divs are siblings.

Another option would be $('.sub').not(this).css({'color': 'white', 'height': '35px', 'background': '#990000'}); In this case, basically we're saying to match on everything with class 'sub' but not this (aka the currently clicked item). More information here: http://api.jquery.com/not/

[klemme]

I knew there was an easy way of doing it, and you perfectly showed that :-)

I have four divs, containing, ul li a ( a has the class of .sub1 in the first div, and .sub2 in the second etc etc.) returning false onclick.

It is working now, and I used the second example you showed me, and improved the way i had added the styles in the first place, by chaining the css ( again like your answer )..

Is this the optimal way of doing it ( It is working, so no complaints, just wondering if I am writing too much code, where I could have made it more simple? - All though its good now, as I can see and understand all of what is going on.. ) - Have made more php than JS, so fighting a bit to learn it at this point..

$(function() {

$('.sub1').click(function() {
$(this).css({'color': '#FFF', 'height': '35px', 'background': '#900'}); 
$('.sub1').not(this).css({'color': '#000', 'height': '30px', 'background': '#CCC'});
});

$('.sub2').click(function() {
$(this).css({'color': '#FFF', 'height': '35px', 'background': '#096'}); 
$('.sub2').not(this).css({'color': '#000', 'height': '30px', 'background': '#CCC'});
});

$('.sub3').click(function() {
$(this).css({'color': '#FFF', 'height': '35px', 'background': '#069'}); 
$('.sub3').not(this).css({'color': '#000', 'height': '30px', 'background': '#CCC'});
});

$('.sub4').click(function() {
$(this).css({'color': '#FFF', 'height': '35px', 'background': '#664798'}); 
$('.sub4').not(this).css({'color': '#000', 'height': '30px', 'background': '#CCC'});
});

});// Function done

Thats the best way to achieve itm right? Basically the only thing changing is the bgcol, of the element being clicked, so maybe I could put in an if else statement, tjecking the sub class name, and then a var containing the bgcolor?

Thanks a lot anyways!!

Klemme