Toggle the Background Color between two links to show which is active using jquery and css?

Question

(Jquery) I have two divs that I'm toggling back and forth (show and hide) between on my page using a link to each. I want the link that is clicked on to change to a highlighted background color and when you click on the other it is highlighted and the previous goes back to normal.

I've tried reworking the toggle code I've got for the divs to apply it to the css on the links but I can't figure it out.

If anyone has an idea, I'd be grateful. Thank you.

Answer 1

You want code that selects both, and applies the class to only one of the selected one.

$('div.togglers').click(function() {
    $('div.togglers').removeClass('selected').filter(this).addClass('selected');
});

After that, you just need two separate CSS rules.

div.togglers {
  background-color: white;
}
div.togglers.selected {
  background-color: red;
}

Answer 2

<a href="link1" class="theLinkClass" id="currentLink">Link 1</a>
<a href="link2" class="theLinkClass">Link 2</a>

Then in your css

#currentLink {
    background-color: #FFCCCC;
}

Then your jQuery

$(document).ready(function(){

    $('.theLinkClass').click(function(){

        $('.theLinkClass').attr('id','');
        $(this).attr('id','currentLink');

    });

});

If you have your links in a div with a class or id the jQuery code can be shortened.

Let's say....

<div class="myLinks">
    <a href="link1" class="currentLink">Link 1</a>
    <a href="link2">Link 2</a>
</div>

CSS

.currentLink{
    background-color: #FF0000;
}

jQuery

$(document).ready(function(){

    $('.mylinks a').click(function(){

        $('.mylinks a').removeClass('currentLink').filter(this).addClass('currentLink');

    });

});

The latter of the two examples takes advantage of jQuery's chaining ability. Hope this helps!

Answer 3

Set up CSS to do the highlighting and switching for you:

.First .ShowFirst { border: 1px solid #000; }
.First .SecondContent { display: none; }
.Second .ShowSecond { border: 1px solid #000; }
.Second .FirstContent { display: none; }

Javascript to bind click events that change the class name of the parent:

$(function() {
  $('.ShowFirst').Click(function(){
    $('#Parent').attr('className', 'First');
    return false;
  });
  $('.ShowSecond').Click(function(){
    $('#Parent').attr('className', 'Second');
    return false;
  });
});

The class name of the parent decides which link is highlighted and which content is shown. Here the first content is shown from start:

<div id="Parent" class="First">
  <a class="ShowFirst" href="#">Show first</a>
  <a class="ShowSecond" href="#">Show second</a>
  <div class="FirstContent">1</div>
  <div class="SecondContent">2</div>
</div>

(As a bonus it won't show both content while loading and hide one when the loading is done. Only one of the content divs are visible from start.)