Jquery banner functionality

[trillodigital]

Hi,

I'm using the JQuery Globe Feature List banner (http://jqueryglobe.com/labs/feature_list/) on my new website here - http://clientzone.trillodigital.co.u...ls/index1.html.

I want the heading word (H6) on each tab to change colour on the active/current tabs. Please could somebody help me to achieve this please?

Here's the CSS:


div#feature_list {
width: 762px;
height: 313px;
overflow: hidden;
position: relative;
background:url(../images/bnr-bg.jpg);
background-repeat:no-repeat;
}

div#feature_list ul {
position: absolute;
top: 0px;
list-style: none;
padding: 0;
margin: 0;
}

ul#tabs {
left: 0;
z-index: 2;
width: 220px;
}

ul#tabs li {
font-family: Arial;
}

ul#tabs li img {
padding: 5px;
border: none;
float: left;
margin: 0;
}



ul#tabs li a {
background:url('../images/feature-tab.png');
background-repeat:no-repeat;
text-decoration: none;
display: block;
padding: 9px 0 3px 16px;
height: 63px;
outline: none;
font-size: 11px;
color:#010976;
}

ul#tabs li a:hover {
text-decoration: none;
}



ul#tabs li a.current {
background:url('../images/feature-tab-current.png');
background-repeat:no-repeat;
width:273px;
height:76px;
font-size: 13px;
color:#ffffff;
}

ul#tabs li a.current:hover {
text-decoration: none;
cursor: default;
}

ul#tabs li h6 {
font-family:"Myriad Pro","Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:normal;
color:#000876;
font-size:22px;
margin:0 0 1px 0;
}

ul#output {
right: 0;
width: 762px;
height: 313px;
position: relative;
}

ul#output li {
position: absolute;
width: 762px;
height: 313px;
}

ul#output li a {
font-family:"Myriad Pro","Trebuchet MS", Arial, Helvetica, sans-serif;
color:#3380B9;
font-weight:bold;
position: absolute;
bottom: 10px;
right: 13px;
width:104px;
height:24px;
padding:9px 0 0 0;
text-align:center;
text-decoration: none;
font-size: 14px;
background-image:url(../images/bnr-btn.jpg);
background-repeat:none;
-moz-border-radius: 5px;
word-spacing:2px;
}

ul#output li a:hover {
color:#010976;
background:url(../images/bnr-btn-hvr.jpg);
}


Here's the JS:

<script>
/*
* FeatureList - simple and easy creation of an interactive "Featured Items" widget
* Examples and documentation at: http://jqueryglobe.com/article/feature_list/
* Version: 1.0.0 (01/09/2009)
* Copyright (c) 2009 jQueryGlobe
* Licensed under the MIT License: http://en.wikipedia.org/wiki/MIT_License
* Requires: jQuery v1.3+
*/
;(function($) {
$.fn.featureList = function(options) {
var tabs = $(this);
var output = $(options.output);

new jQuery.featureList(tabs, output, options);

return this;
};

$.featureList = function(tabs, output, options) {
function slide(nr) {
if (typeof nr == "undefined") {
nr = visible_item + 1;
nr = nr >= total_items ? 0 : nr;
}

tabs.removeClass('current').filter(":eq(" + nr + ")").addClass('current');

output.stop(true, true).filter(":visible").fadeOut();
output.filter(":eq(" + nr + ")").fadeIn(function() {
visible_item = nr;
});
}

var options = options || {};
var total_items = tabs.length;
var visible_item = options.start_item || 0;

options.pause_on_hover = options.pause_on_hover || true;
options.transition_interval = options.transition_interval || 7000;

output.hide().eq( visible_item ).show();
tabs.eq( visible_item ).addClass('current');

tabs.click(function() {
if ($(this).hasClass('current')) {
return false;
}

slide( tabs.index( this) );
});

if (options.transition_interval > 0) {
var timer = setInterval(function () {
slide();
}, options.transition_interval);

if (options.pause_on_hover) {
tabs.mouseenter(function() {
clearInterval( timer );

}).mouseleave(function() {
clearInterval( timer );
timer = setInterval(function () {
slide();
}, options.transition_interval);
});
}
}
};
})(jQuery);
</script>

<script>
$(document).ready(function() {

$.featureList(
$("#tabs li a"),
$("#output li"), {
start_item : 0
}
);

/*

// Alternative


$('#tabs li a').featureList({
output : '#output li',
start_item : 1
});

*/

});
</script>

THANKS IN ADVANCE!

[Jason]

Your second link is broken.