Tabs para mi web

webelgrillo · #1 (**permalink**) 08/11/2012, 16:54

Tengo este código
el problema que tengo es que quiero que el boton activo tenga el fondo de color negro y la letra blanca. ayudenme como lo hago es urgente.

que cuando le haga clic en uno de los botones cambie a los colores que digo.

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">

#wrapper {
    width:960px;
}
ul.tabs {
    width:960px;
	margin: 0 0 0 15px;	
    padding:0;
	font-family: 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="wrapper">
    <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>

webelgrillo · #2 (**permalink**) 08/11/2012, 18:06

cada que entro a este foro con la ilusion de encontrar ayuda.

no encuentro a la indicada gracias espero que me ayudes si lees esto.

jav_000 · #3 (**permalink**) 08/11/2012, 18:45

Creo que te has equivocado de foro. Este es de programación en java

webelgrillo · #4 (**permalink**) 08/11/2012, 18:50

Apuesto que ni leiste la lo que necesito.

lo que pido es java si miras el código es una orden que manda a un css desde java.

gracias.

chuidiang · #5 (**permalink**) 08/11/2012, 22:47

java y javascript no es lo mismo. Necesitas javascript, que no es este foro.

Se bueno.