ok i just changed the js for you
// this is our object refference point. we only want to effect elements
within this object
var obj = $(".cs_links");
// we now need a refference point for each item
// the , obj means we only want items within our object
var items = $(".cs_contact", obj);
// click function
$(".cs_contact").click(function() {
var current = items.index($(this)); // get the .eq() of the item clicked
// remove the active class from all items
items.removeClass("active");
// set clicked item to active
items.eq(current).addClass("active");
});
On Sun, Jul 5, 2009 at 4:47 AM, Erik R. Peterson <eriks...@mac.com> wrote:
> I have two image based links that open external an page in a <div>.
> I am changing the background via hover from the CSS.
>
> *My CSS:*
>
> #cs_contact {width: 146px; height: 34px; float: left;}
> a.cs_contact {width: 146px; height: 34px; background:
> url('/img/pages/cs_contact.png'); display:block}
> a.cs_contact:hover {background-position: -146px;}
> a.cs_contact_a {width: 146px; height: 34px; background:
> url('/img/pages/cs_contact.png'); display:block;background-position:
> -146px;}
> #cs_appoint {width: 146px; height: 34px; float: left; margin: 10px 0px 0px
> 0px}
> a.cs_appoint {width: 146px; height: 34px; background:
> url('/img/pages/cs_appoint.png'); display:block}
> a.cs_appoint:hover {background-position: -146px;}
>
> *My JS:*
>
> $('.cs_contact').click(function() {
> $(this).removeClass("cs_contact");
> $(this).addClass("cs_contact_a");
> });
> *My HTML:*
>
> <div id="cs_links">
> <div id="cs_contact">
> <a class="cs_contact" id="js_contact" href="#"></a></div>
> <div id="cs_appoint">
> <a class="cs_appoint" id="js_appoint" href="#"></a></div>
> </div>
>
> I discovered how to make one image link ACTIVE via js, but I don't know how
> to make the two links toggle with each other. I can only have ONE LINK
> active at a time.
>
> I have 10 more image links to add to this page.
>
> Many thanks.
>
> Erik
>
>
>
