Switch CSS styles of two elements with link click

Question

I have two tab buttons at the top of this webpage I'm in the middle of building. There are two styles associated with the buttons a dark blue representing unselected, and light blue mean already selected and view able on the page. The problem I'm having is that I searched through SO for a simple easy JS function that would switch the CSS styles and the one I have currently does a good job. The problem I'm having and you'll see this when you look at the page is that both start up with the dark blue background and I only want one of the links called "Overview" to begin with the light blue BG and the "Features" link to have the dark blue BG. When clicked both will switch with the page content.

web link to page

jQuery

$(function() {
        var links = $('.scrollerbtn li a.slt').click(function() {
        links.removeClass('active');
        $(this).addClass('active');
        });
});

HTML

<div class="scrollernav">
        <ul class="scrollerbtn">                
               <li><a class="slt" href="#" id="scroll5load" onclick="changeClass1()">Overview</a></li>
               <li><a class="slt" href="#" id="scroll5load2" onclick="changeClass()">Features</a></li>
        </ul>                
</div>

CSS

.scrollerbtn li a.slt {
display: inline;
color: #FFF;
text-align: center;
background-image: url(../../../images/tabbtnselect.png);
background-repeat: no-repeat;
background-position: center 5px;
width: 130px;
height: 40px;
line-height: 50px;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
font-weight: normal;
text-decoration: none;
margin-right: 10px;
float: left;
margin-left: -30px;
}


.scrollerbtn li a.slt.active {
display: inline;
color: #333;
text-align: center;
background-image: url(../../../images/tabbtn.png);
background-repeat: no-repeat;
background-position: center 5px;
width: 130px;
height: 40px;
line-height: 50px;
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
font-weight: normal;
text-decoration: none;
margin-right: 10px;
float: left;
margin-left: -30px;
}

How would I go about modifying this?

Kevin Boucher · Accepted Answer · 2012-10-19 02:48:04Z

1

Add the active class to the 'Overview' tab.

<ul class="scrollerbtn">                
    <li><a class="slt active" href="#" id="scroll5load" onclick="changeClass1()">Overview</a></li>
    <li><a class="slt" href="#" id="scroll5load2" onclick="changeClass()">Features</a></li>
</ul>

answered Oct 19, 2012 at 2:48

Kevin Boucher

16.8k3 gold badges51 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jason Over a year ago

you can also remove the onclick attributes altogether since you are using the more elegant JQuery solution.

Kakashi Hatake · Accepted Answer · 2012-10-19 02:51:42Z

0

basically you need to do is change the active tab background image by clicking it right...?

answered Oct 19, 2012 at 2:51

Kakashi Hatake

3,0841 gold badge25 silver badges32 bronze badges

1 Comment

Kakashi Hatake Over a year ago

you can use jQuery tabs to be give a great look to your site. jqueryui.com/tabs

Collectives™ on Stack Overflow

Switch CSS styles of two elements with link click

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related