no cambia de color los botones cuando hago clic

webelgrillo · #1 (**permalink**) 08/11/2012, 19:55

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.

kreil · #2 (**permalink**) 09/11/2012, 02:05

añade o cambia el atributo style.
$(objeto).setAttribute('style','color:black;backgr ound-color:red').
sería lo más sencillo creo.

webelgrillo · #3 (**permalink**) 09/11/2012, 10:05

No se si lo estoy haciendo mal pero no funciona

asi quedo

Código HTML:

Ver originalfunction switch_tabs(obj)
{
    $('.tab-content').hide();
    $('.tabs a').removeClass('style','color:black;background-color:red');
    var id = obj.attr("rel");
 
    $('#'+id).show();
    obj.addClass("selected");
}

pero no se cambia el boton al color en este caso RED.

como lo haria gracias.

stramin · #4 (**permalink**) 09/11/2012, 12:59

Esta linea es incorrecta:

$('.tabs a').removeClass('style','color:black;background-color:red');

removeClass es para remover una clase que hayas puesto en la etiqueta, no es para especificar un estilo

webelgrillo · #5 (**permalink**) 10/11/2012, 07:54

No me funciona cual seria la forma correcta lo que pasa es que según a mi codigo de arriba lo que quiero es que al hacer clic cambie de color el fondo y la letra

ayuda gracias.