JavaScript - Tab que al cargar web este abierta el primer tab

 
Vista:
sin imagen de perfil
Val: 154
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Tab que al cargar web este abierta el primer tab

Publicado por Eduardo Arroyo Teheran (57 intervenciones) el 24/09/2020 21:08:22
No se si esta pregunta haga parte de este foro.. pero me gustaría que al cargar la web este abierto por defecto una tab de esta pues están todas colapsadas y hay que oprimir para abrir una

que script pongo para que haga efecto

acá pongo el script que tome de ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- Tab links -->
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
 
<!-- Tab content -->
<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>
 
<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>
 
<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 2.727
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Tab que al cargar web este abierta el primer tab

Publicado por joel (615 intervenciones) el 25/09/2020 07:39:56
Hola Eduardo, faltaria ver que estilos tiene cada tab, para dejar una visible...

Entiendo que están las tres escondidas por algún estilo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 154
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Tab que al cargar web este abierta el primer tab

Publicado por Eduardo Arroyo Teheran (57 intervenciones) el 25/09/2020 16:37:23
Así mas o menos tengo mi code... si notan al cargarlo en el explorador todas las tabs salen cerradas y hay que seleccionar para abrir y me gustaría que la primera saliera abierta al cargar la web (activa)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<style>
/* Estilo del TAB */
.tab {
	overflow: hidden;
	border: 1px solid #ccc;
	background-color: #FF9751;
	text-align: left;
}
/* Para abrir el contenido de la pestaña */
.tab button {
  background-color: #FF9751;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}
/* Color boton sobre */
.tab button:hover {
  background-color: #FF6600;
}
/* Boton Activo */
.tab button.active {
  background-color: #FF6600;
}
/* Estilo del TAB */
.tabcontent {
	display: none;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;
	text-align: left;
}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
}
.hy {
	text-align: right;
}
.gk {
	font-weight: bold;
}
.typ {
	text-align: left;
}
.typ {
	text-align: left;
}
#apDiv1 {
	position: absolute;
	left: 251px;
	top: 18px;
	width: 807px;
	height: 82px;
	z-index: 1;
}
#Novedades {
	text-align: left;
}
#apDiv2 {
	position: absolute;
	left: 820px;
	top: 137px;
	width: 96px;
	height: 116px;
	z-index: 1;
}
a:link {
	color: #000000;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #000;
}
a:hover {
	text-decoration: none;
	color: #000000;
}
a:active {
	text-decoration: none;
	color: #000;
}
.typ {	text-align: left;
}
.typ {	text-align: left;
}
.tabla1g {
	margin: 0px;
	padding: 0px;
}
</style>
<script>
function openCity(evt, cityName) {
  // DECLARO LAS VARIABLES
  var i, tabcontent, tablinks;
  // Obtenga todos los elementos con class = "tabcontent" y escóndelos
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  // Obtenga todos los elementos con class = "tablinks" y elimine la clase "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  // Mostrar la pestaña actual y agregar una clase "activa" al botón que abrió la pestaña
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>
  <div class="tab">
          <button class="tablinks" onClick="openCity(event, '1')" ><b>1</b></button>
          <button class="tablinks" onClick="openCity(event, '2')"><b>2</b></button>
          <button class="tablinks" onClick="openCity(event, '3')"><b>3</b></button>
          <button class="tablinks" onClick="openCity(event, '4')"><b>4</b></button>
  </div>
   <!-- CONTENIDOS DE LOS TAB -->
<div id="1" class="tabcontent">
<h5>Titulo 1</h5>
</div>
<!----------------TABLA TAB 2 ---------------------->
<div id="2" class="tabcontent">
<h5>Titulo 2</h5>
</div>
<!----------------TABLA TAB 3 ---------------------->
<div id="3" class="tabcontent">
<h5>Titulo 3</h5>
</div>
<!----------------TABLA TAB 4 ---------------------->
<div id="4" class="tabcontent">
<h5>Titulo 4</h5>
</div>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 2.727
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Tab que al cargar web este abierta el primer tab

Publicado por joel (615 intervenciones) el 25/09/2020 20:49:43
Prueba a poner el primero así

1
<div id="London" class="tabcontent" style="display:block">
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar