Maker Palace

¡El Reino del RpgMaker y del Ocio!
 
ÍndiceBuscarGrupos de UsuariosScriptsRecursosTutorialesPalaceJuegosPalaceWikiFAQRegistrarseConectarse
Conectarse
Nombre de Usuario:
Contraseña:
Entrar automáticamente en cada visita: 
:: Recuperar mi contraseña
Temas similares
Buscar
 
 

Resultados por:
 
Rechercher Búsqueda avanzada
Últimos temas
» RPG Maker Mv Pregunta
por kyonides-arkanthos Sáb Ene 13, 2018 12:32 am

» [VXAce] Burando Doragon
por gantzer49 Dom Dic 31, 2017 10:07 am

» Una Ventana de Oro y Monto de Préstamos
por kyonides-arkanthos Jue Dic 21, 2017 1:41 am

» Reparación de Conjuros
por kyonides-arkanthos Jue Oct 12, 2017 12:22 am

» Screenshot del nuevo KUnits XP oon menú
por LinkLuis55 Sáb Sep 23, 2017 10:03 pm

» Dando una vuelta por acá
por LinkLuis55 Dom Ago 20, 2017 2:56 pm

» Heroes del Crimen 2 DEMO
por jasuso Mar Ago 01, 2017 12:04 am

Recomendados
RPG en RPG Maker
La importancia de un Backup
Que requiere un sistema de Batalla para ser exitoso
9 Minutos de Juegos por fans
Guía de Subforos para Tontos de Maker Palace
Indice de Scripts Locales XP
Falcao Pearl ABS Liquid
¿Quién está en línea?
En total hay 8 usuarios en línea: 0 Registrados, 0 Ocultos y 8 Invitados :: 2 Motores de búsqueda

Ninguno

La mayor cantidad de usuarios en línea fue 179 el Mar Ago 30, 2011 10:06 pm.
MiniChat
Mejores posteadores
Raiden (3346)
 
DaviX (2740)
 
Frikilangelo (2461)
 
SagahonArturo (1806)
 
Falcao (1775)
 
kyonides-arkanthos (1772)
 
Mur-mai-der (1755)
 
Ares (1613)
 
LinkLuis55 (1558)
 
Webmaster24 (1354)
 
Afiliados
Crear foro Mundo Maker Foro de anime y RM2k3/XP/VX Computer mix
Flag Counter
free counters
Visitas


Comparte | 
 

 [HTML][CSS][JS] ¿Cómo hacer que la primera pestaña aparezca seleccionada?

Ver el tema anterior Ver el tema siguiente Ir abajo 
AutorMensaje
kyonides-arkanthos
Lord Guru Maker
Lord Guru Maker
avatar

Cantidad de envíos : 1772
Miembro desde : 03/02/2010
Sexo : Masculino

Maker : RMXP


MensajeTema: [HTML][CSS][JS] ¿Cómo hacer que la primera pestaña aparezca seleccionada?   Mar Sep 29, 2015 7:06 am

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;
}
Volver arriba Ir abajo
Ver perfil de usuario http://deloquesea.mforos.com/forums/
 
[HTML][CSS][JS] ¿Cómo hacer que la primera pestaña aparezca seleccionada?
Ver el tema anterior Ver el tema siguiente Volver arriba 
Página 1 de 1.
 Temas similares
-
» De Orriols a Europa. Un club centenario que quiere hacer historia (Levante UD)
» [Fic]~Buscando algo para hacer~ Parte 1
» Programa para hacer firmas y camisetas
» [Wecoc]video tutorial de hacer tilesets
» Como hacer un Contrato Oficial

Permisos de este foro:No puedes responder a temas en este foro.
Maker Palace :: Ocio :: Cafetin-
Cambiar a: