quisiera que me ayuden porfavor tengo este codigo.
son unos botones Tabs y lo que pasa es que cuando le haga clic en un boton cambie de color de texto y fondo ayudenme les dejo mi codigo.
Código HTML:
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<head>
<title>Ayuda con tabs</title>
<style type="text/css">
#wrappertabs {
width:960px;
}
ul.tabs {
width:960px;
margin: 0 0 0 15px;
padding:0;
font-family: "Swiss", Arial, Helvetica;
}
ul.tabs li {
display:block;
float:left;
padding:0 1px;
}
ul.tabs li a {
display: block;
float: left;
padding: 10px;
font-size:16px;
background-color: #793307;
color: #fff;
text-decoration: none;
}
ul.tabs li a:hover {
background-color:#793307;
color:#FFF;
}
.selected {
font-weight:bold;
background-color:#999;
color:#9F0;
font-size:28px;
}
.tab-content {
clear: both;
padding: 10px;
margin:0px;
background-image: url(tabs_files/bg000000.jpg);
background-repeat: no-repeat;
background-color: #F2F1ED;
}
.ini {
-moz-border-radius: 20px 0px 0px 20px ;
-webkit-border-radius: 20px 0px 0px 20px ;
-khtml-border-radius: 20px 0px 0px 20px ;
border-radius: 20px 0px 0px 20px ;
}
.fin {
-moz-border-radius: 0px 20px 20px 0px ;
-webkit-border-radius: 0px 20px 20px 0px ;
-khtml-border-radius: 0px 20px 20px 0px ;
border-radius: 0px 20px 20px 0px ;
}
</style>
<script type="text/javascript" src="tabs_files/jquery00.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$('.tabs a').click(function(){
switch_tabs($(this));
});
switch_tabs($('.defaulttab'));
});
function switch_tabs(obj)
{
$('.tab-content').hide();
$('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$('#'+id).show();
obj.addClass("selected");
}
//-->
</script>
</head>
<body>
<div id="wrappertabs">
<ul class="tabs">
<li><a href="#" class="defaulttab ini" rel="tabs1">Overview</a></li>
<li><a href="#" rel="tabs2">Itinerary</a></li>
<li><a href="#" rel="tabs3">Useful information</a></li>
<li><a href="#" rel="tabs4">Dates & prices</a></li>
<li><a href="#" rel="tabs5" class="fin">Extensions</a></li>
</ul>
<div class="tab-content" id="tabs1">
<p>Tab #1 content</p>
<p>hola</p>
</div>
<div class="tab-content" id="tabs2">
<p>Tab #2 content</p>
<p>hola como estas </p>
</div>
<div class="tab-content" id="tabs3">
Tab #3 content espero que estes bien</div>
<div class="tab-content" id="tabs4">
<p>Tab #3 content espero que estes bien</p>
<p>2012</p>
</div>
<div class="tab-content" id="tabs5">
<p>Tab #3 content espero que estes bien</p>
<p>ok</p>
</div>
</div>
</body>
</html> gracias de antemano por la ayuda.