x

Uso de cookies

Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarle publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación.
Si continúa navegando, consideramos que acepta su uso. Puede obtener más información, o bien conocer cómo cambiar la configuración, en nuestra Política de cookies

Buscar ...
Portal · Foros · Noticias · Páginas · Calendario · Nuevos mensajes · Buscar · Imágenes · Avatares · Usuarios · Fisgona
Diseño Gráfico
MundoDeluxe · Foros · Informática y entretenimiento · Diseño Gráfico
[HTML][CSS][JS] ¿Cómo hacer que la primera pestaña aparezca seleccionada?
Haz clic para ver el perfil del usuario
Super Moderador
Super Moderador
Mensajes: 4.560
·
#1 ·
Estoy trabajando con código de html, css y javascript y deseaba crear unas pestañas de lo más simples pero muy funcionales. Hasta el momento todo iba bien, pero no me imaginé que el código que había recopilado de sitios web de consejos de cómo codificar tal cosa no había solucionado cierto inconveniente.

Ese problemilla es nada menos que el ver que la primera pestaña no aparece preseleccionada. En CSS ya traté de definir el color de esa pestaña. Lo malo de eso era que no volvería a cambiar por más que pasara haciendo clic en una y otra pestaña.

¿Qué me recomiendan hacer? ¿Debo utilizar Javascript para hacer eso posible? Si es así, ¿cómo lo hago?

Otra duda que tengo es si es posible y recomendable que no permita que se agregue el ancla o anchor de cada pestaña a la URL de la página web en cuestión. Intenté con eliminar el comportamiento que viene por defecto sin tener ningún éxito.

Aquí les dejo los códigos.

HTML

Código:
<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Pestañas Interactivas</title>
  <link rel="stylesheet" type="text/css" href="style/main.css"/>
  <script type="text/javascript">
      document.getElementById("tab1").onclick = function() {
        return false;
      };
      document.getElementById("tab2").onclick = function() {
        return false;
      };
      document.getElementById("tab3").onclick = function() {
        return false;
      };
    </script>
  </head>
  <body>
    <article class="tabs">

     <section id="tab1">
      <h2><a href="#tab1">Tab 1</a></h2>
      <p>This content appears on tab 1.</p>
      <p>Just another useless paragraph.</p>
     </section>
   
     <section id="tab2">
      <h2><a href="#tab2">Tab 2</a></h2>
      <p>This content appears on tab 2.</p>
      <p>Just another useless paragraph.</p>
      </section>
   
      <section id="tab3">
      <h2><a href="#tab3">Tab 3</a></h2>
      <p>This content appears on tab 3.</p>
      <p>Just another useless paragraph.</p>
     </section>
    </article>
  </body>
</html>

CSS (archivo main.css en la carpeta style)

Código:
article.tabs
{
  position: relative;
  display: block;
  width: 40em;
  height: 15em;
  margin: 2em auto;
}

article.tabs section
{
   position: absolute;
   display: block;
   top: 1.8em;
   left: 0;
   height: 12em;
   padding: 10px 20px;
   background-color: #ddd;
   border-radius: 5px;
   border-color: black;
   border-width: 4px;
   box-shadow: 0 3px 3px rgba(0,0,0,0.1);
   z-index: 0;
}

article.tabs section:first-child
{
   z-index: 1;
}

article.tabs section h2
{
   position: absolute;
   font-size: 1em;
   font-weight: normal;
   width: 120px;
   height: 1.8em;
   top: -1.8em;
   left: 10px;
   padding: 0;
   margin: 0;
   color: #999;
   background-color: #ddd;
   border-radius: 5px 5px 0 0;
}

article.tabs section:nth-child(2) h2
{
   left: 132px;
}

article.tabs section:nth-child(3) h2
{
   left: 254px;
}

article.tabs section h2 a
{
   display: block;
   width: 100%;
   line-height: 1.8em;
   text-align: center;
   text-decoration: none;
   color: inherit;
   outline: 1 none;
}

article.tabs section h2 a:hover
{
   background-color: #f1f0ee;
}

article.tabs section:target,
article.tabs section:target h2
{
   color: #333;
   background-color: :beige; /* #fff; */
   z-index: 2;
}

article.tabs section,
article.tabs section h2
{
   -webkit-transition: all 500ms ease;
   -moz-transition: all 500ms ease;
   -ms-transition: all 500ms ease;
   -o-transition: all 500ms ease;
   transition: all 500ms ease;
}

MIS SCRIPTS - NORMAS MUNDODELUXE

No puedo deprimirme, el descaro no me lo permite.

Then nivo Kizne shes plageren day ses spegai derenos... os ves meno Noyno kel enael...
[Soy un kitsune y deseo vivir y jugar eternamente... o por muchos años como mínimo...]

kitsune solitario, no concede entrevistas ni participa en proyectos, dejó proyectos por falta de inspiración y mera pereza
_______________________________________
Aviso publicitario gratuito. No nos molesta incomodar a nuestros potenciales clientes las 24 horas del día. De todos modos el disgusto es suyo.
ATENCIÓN: Este tema no tiene actividad desde hace más de 6 MESES,
te recomendamos abrir un nuevo tema en lugar de responder al actual
MundoDeluxe · Foros · Informática y entretenimiento · Diseño Gráfico
Opciones:
Versión imprimible del tema
Subscríbete a este tema
Date de baja de este tema
Ir al subforo:  
TU NO PUEDES Escribir nuevos temas en este foro
TU NO PUEDES Responder a los temas en este foro
TU NO PUEDES Editar tus propios mensajes en este foro
TU NO PUEDES Borrar tus propios mensajes en este foro
Ahora son las 03:54 UTC-05:00
Temas similares
No se han encontrado temas similares
Recomendado
Siguenos
Buscador avanzado
Opciones comunidad
Portal
Foros
Noticias
Páginas
Calendario
Nuevos mensajes
Buscar
Imágenes
Avatares
Estadísticas
Usuarios
Fisgona
Usuarios
Nick / Apodo:
Contraseña:
Código de seguridad:
Usuarios:
Último:
Hoy: 0
Ayer: 1
Total: 20.089
Usuarios conectados
Usuarios conectados:
Invitados: 36
Registrados: 0
Invisibles: 0
Total: 36
Temas recientes
KPointsLotto XP
KReaper XP
KScenario XP
(Pedido)Por favor alguien que sea bueno haciendo scrips necesito una scrip para una forja
Salir de evento común que está dentro de otro.
HiddenChest para XP VX y ACE
KEW XP - Enemigos + Armas
Subforos
Comunidad MundoDeluxe
· General MundoDeluxe - ¿Dudas, problemas o sugerencias?
· Anuncios y noticias
· Presentate ante la comunidad
· Tema libre / Off topic
Zona RPG Maker VX ACE
· Tutoriales RPG Maker VX Ace
· Material RPG Maker VX Ace
· ¿Dudas, problemas y pedidos RPG Maker VX o VX Ace?
· Scripts RPG Maker VX y VX Ace
Zona RPG Maker XP
· Tutoriales RPG Maker XP
· ¿Dudas, problemas y pedidos RPG Maker XP?
· Zona Scripts RPG Maker XP
· Scripts RPG Maker XP "Dudas, problemas y pedidos"
· RTP MundoDeluxe XP
Zona de Recursos
· Recursos RPG Maker XP
· Characters, Battlers, Tilesets
Informática y entretenimiento
· Software y Aplicaciones
· Diseño Gráfico
· Galerías, muestras y talleres diseño gráfico
Publicidad para financiarnos
Afiliados