Foros del Web » Programando para Internet » Javascript » Frameworks JS »

no cambia de color los botones cuando hago clic

Estas en el tema de no cambia de color los botones cuando hago clic en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/11/2012, 18:55
Avatar de webelgrillo  
Fecha de Ingreso: marzo-2008
Mensajes: 142
Antigüedad: 12 años, 7 meses
Puntos: 0
no cambia de color los botones cuando hago clic

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.
  #2 (permalink)  
Antiguo 09/11/2012, 01:05
Avatar de kreil  
Fecha de Ingreso: septiembre-2012
Ubicación: España
Mensajes: 63
Antigüedad: 8 años, 1 mes
Puntos: 16
Respuesta: no cambia de color los botones cuando hago clic

añade o cambia el atributo style.
$(objeto).setAttribute('style','color:black;backgr ound-color:red').
sería lo más sencillo creo.
__________________
Diseñador y programador de El break; de la informática
  #3 (permalink)  
Antiguo 09/11/2012, 09:05
Avatar de webelgrillo  
Fecha de Ingreso: marzo-2008
Mensajes: 142
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: no cambia de color los botones cuando hago clic

No se si lo estoy haciendo mal pero no funciona

asi quedo

Código HTML:
Ver original
  1. function switch_tabs(obj)
  2. {
  3.     $('.tab-content').hide();
  4.     $('.tabs a').removeClass('style','color:black;background-color:red');
  5.     var id = obj.attr("rel");
  6.  
  7.     $('#'+id).show();
  8.     obj.addClass("selected");
  9. }

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

como lo haria gracias.
  #4 (permalink)  
Antiguo 09/11/2012, 11:59
Avatar de stramin  
Fecha de Ingreso: marzo-2008
Ubicación: Cubil felino
Mensajes: 1.650
Antigüedad: 12 años, 7 meses
Puntos: 336
Respuesta: no cambia de color los botones cuando hago clic

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
__________________
El objetivo de este foro es orientar al usuario como un favor y no como una obligación.

Yo soy de los que dan puntos por aporte :D
  #5 (permalink)  
Antiguo 10/11/2012, 06:54
Avatar de webelgrillo  
Fecha de Ingreso: marzo-2008
Mensajes: 142
Antigüedad: 12 años, 7 meses
Puntos: 0
Respuesta: no cambia de color los botones cuando hago clic

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.

Etiquetas: botones, clic, color, hover, html, fondo, cambios
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:11.