How to set active CSS block navigation element (span) to a different color to using Javascript and an “active” class?

Question

This is giving me a major headache. Here's my code:

This section of the page is laid out using a single .php file and some CSS + php to create 3 'panels' that display in a block element and navigate around as though they are 3 different pages, when really they're just different chunks of the page being moved. The navigation is 3 simple a href links with a span tag thrown in to contain the text. The problem is that I need to change the color of that span text when that particular "tab" is active. Note, I am not talking about the css function a:active or anything like that. I need the text to alternate between 3 separate colors. Color 1 for the no activity state: "product-reservation-btn-1" is this color unless > Color 2 is the :hover state, which is currently working, but finally Color 3 is the active state where "$css_step_2_tab" is the currently selected tab, the span text becomes Color 3 until another tab is selected. Any ideas? This is driving me nutty!

CSS:

#product-reservation-steps a span{
text-align:center;
color:#ffffff;
font-family: 'latoregular','arial','serif';
font-size:1.8em;
line-height:48px;
text-decoration:none;
color: #b6b7b7;
}

#product-reservation-steps a span:hover {
color: #f19c23;
}

#product-reservation-step-1-btn{
display:block;
position:absolute;
top:0;
left:5;
z-index:1;
width:300px;
height:48px;
text-align:center;
text-decoration:none;   
}

#product-reservation-step-1-btn.active{ 
font-style: oblique;    
}

#product-reservation-step-1-btn:hover{  
text-decoration:none;   
}

#product-reservation-step-2-btn{
display:block;  
position:absolute;
top:0;
left: 320px;
z-index: 2;
width: 278px;
height:48px;
text-align:center;
text-decoration:none;       
}

#product-reservation-step-2-btn.active{
font-style: oblique;    
}

#product-reservation-step-2-btn:hover{  
text-decoration:none;   
}

#product-reservation-step-3-btn{
display:block;  
position:absolute;
top:0;
left:573px;     
z-index:1;  
width:300px;
height:48px;
text-align:center;  
text-decoration:none;   
}

#product-reservation-step-3-btn.active{ 
font-style: oblique;    
}

#product-reservation-step-3-btn:hover{  
text-decoration:none;   
}

HTML:

<!-- begin steps -->
<?php
// default step to open on load
$css_step_1_tab = '';
$css_step_2_tab = '';
$css_step_3_tab = '';

$css_step_1_panel = 'style="display:none;"';
$css_step_2_panel = 'style="display:none;"';
$css_step_3_panel = 'style="display:none;"';

switch($_GET["step"]){
case 3:
$css_step_3_tab = 'class="active"';
$css_step_3_panel = 'style="display:block;"';
break;
case 2:
$css_step_2_tab = 'class="active"';
$css_step_2_panel = 'style="display:block;"';
break;
case 1:
default:
$css_step_1_tab = 'class="active"';
$css_step_1_panel = 'style="display:block;"';
break;
}
?>

<div id="product-reservation-steps">

<a href="javascript:picturebooth_step(1);" id="product-reservation-step-1-btn" <?php echo $css_step_1_tab; ?>><span>Customize your booth</span></a>
<div id="arrow-left"><img src="<?php echo get_template_directory_uri(); ?>/images/arrow-right.png" /></div>
<a href="javascript:picturebooth_step(2);" id="product-reservation-step-2-btn" <?php echo $css_step_2_tab; ?>><span>Billing & Shipping</span></a>
<div id="arrow-right"><img src="<?php echo get_template_directory_uri(); ?>/images/arrow-right.png" /></div>
<a href="javascript:picturebooth_step(3);" id="product-reservation-step-3-btn" <?php echo $css_step_3_tab; ?>><span>Confirmation</span></a>
<div style="clear:both;"></div>

</div>
<!-- end steps -->

Javascript: This is all I can give you without giving away the company name and breaking my nda. This chunk adds the 'active' class to the id "product-reservation-step-btn" depending on which button is active. However, passing a simple css color: #8bcc3b; parameter to the element to change the text color. Nor does creating a #product-reservation-steps a span.active CSS chunk and passing it the color I want for the active state.

// reset tabs and divs
for(i=1 ; i<=total_steps ; i++){
$('#product-reservation-step-'+i).hide();

if($('#product-reservation-step-'+i+'-btn').hasClass("active")){
$('#product-reservation-step-'+i+'-btn').removeClass("active");
}
}
$('#product-reservation-step-'+step).fadeIn("fast");
$('#product-reservation-step-'+step+'-btn').addClass("active");

Any help, advice, or suggestions are deeply appreciated!

Answer 1

I have been messing around for ages to help you, so here is my fiddle , the one i worked on before this (heavily edited), was created to improve your UI and compact your html/css.

This is the new CSS, with some cool "prefix" selectors:

#product-reservation-steps a{
text-align:center;
font-family: 'latoregular','arial','serif';
font-size:1.8em;
line-height:48px;
text-decoration:none;
color: #b6b7b7;
}

#product-reservation-steps a:hover {
    color: #f19c23;
}

[id^="product-reservation-step-"] {
    /* could all this maybe go into '#product-reservation-steps a' ? */ 
    display:block;  
    position:absolute;
    top:0;
}


[id^="product-reservation-step-"].active{  
/* this is how you select prefixes: */
/* element[attribute^="first part of the attribute value"] */
    font-style: oblique;
    color:red;
}

[id^="product-reservation-step-"]:hover{  
    text-decoration:none;   
}

#product-reservation-step-1-btn{
    left:5;
    z-index:1;
    width:300px;  
}

#product-reservation-step-2-btn{
    left: 320px;
    z-index: 2;
    width: 278px;   
}

#product-reservation-step-3-btn{
    left:573px;     
    z-index:1;  
    width:300px; 
}

I edited the javascript, it may or may not help...

// reset tabs and divs
var prodres = '#product-reservation-step-';
var btn = '-btn';
for (i = 1; i <= total_steps; i++)
{
//$("a[class|='product-reservation-step-']").click(function()
//{
$(prodres + i + btn).hide();
if ($(prodres + i).hasClass("active"))
{
    $(prodres + i + btn).removeClass("active");
}
else
{
    $(prodres + step).fadeIn("fast");
    $(prodres + step + btn).addClass("active");
    //}
}
}

Try validating your script on the dirtymarkup site

this: a[class|='product-reservation-step-'] is how you select objects by their prefix, thought it might help.

Also turned the refrences into variables, which should make things easier.

Also, have you tried using :focus ? This wont stay once the mouse is clicked somewhere else or the tab key is pressed though...

This is from W3Schools:

input:focus
{
background-color:yellow;
}

<p>Click inside the text fields to see a yellow background:</p>

<form>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname" />
</form>

Although this may not help, I made something similar this a while ago:

http://leeli.co.uk/bengoddard/demos/ovalistic/

Answer 2

This is from http://jqueryui.com/tabs/

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
</body>
</html>

...May be your easiest solution...

Answer 3

Back again! Try this... alot simpler than I thought it'd be!

jQuery:

$('#menu li a').click(function(){
$('#menu li a').removeClass('selected'); // remove selected from any other item first
$(this).addClass('selected'); //add selected to the one just clicked.
});

CSS:

a {
    font-size: 24px;
    color: blue;
    font-family: 'Open Sans';
}

a:hover {
    font-weight: bolder;
    color: blue;
}

a:link {
    color: red;
}

a:visited {
    color: grey;
}

a:active {
    color: #90EE90;
    transition: color .03s .0s linear;
}

.selected {
    border: solid 1px #000;
    color: orange;
}

.selected span {
    color: #FF0;
}

http://jsfiddle.net/benji/9Qxdz/25/ http://jsfiddle.net/benji/xcbGh/8/