HTML - Activar tab o etiqueta especifica con el menú interno.

 
Vista:
sin imagen de perfil

Activar tab o etiqueta especifica con el menú interno.

Publicado por Luis (5 intervenciones) el 12/10/2017 09:08:38
Buenas,

Necesito ayuda para que algunos elementos del menú enlacen y activen el tab o etiqueta especifica. lo he intentado con el típico <a name=""></a> pero esto solo me funciona fuera de los tabs, solo lo puedo vincular con el tab que está activo (Información) pero no con los demás.

Ejemplo

Por ejemplo:
Yo quiero que cuando en la barra del menú selecciones Pagos te lleve a bajo pero ya con la etiqueta Pagos activada, solo he logrado que me lleve a bajo pero sigo viendo la etiqueta de información.

Este es el parte del código de los tabs:

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
<div class="row allcontent">&nbsp;<div class="col-md-10 col-md-push-2 maincontent">&nbsp;<div class="tabs">&nbsp;<input name="tabs" id="tab1" checked="" type="radio">&nbsp;<label for="tab1"><a name="INFO"></a>INFORMACIÓN</label>&nbsp;<input name="tabs" id="tab2" type="radio">&nbsp;<label for="tab2"><span>PAGOS</span></label>&nbsp;<input name="tabs" id="tab3" type="radio">&nbsp;<label for="tab3"><span>ENVÍOS</span></label>&nbsp;<input name="tabs" id="tab4" type="radio">&nbsp;<label for="tab4"><span>DEVOLUCIONES</span></label>&nbsp;<div id="tab-content1" class="tab-content">&nbsp;<div class="row">&nbsp;<div class="col-sm-6"></div>
<div class="col-md-12"><br>
<h1>Info</h1>&nbsp;<br>
<p style="font-size:18px;&nbsp;font-weight:bold;">If you have any questions or doubts about this template meets or complies with the new eBay guidelines 2017, please do not hesitate to contact us.</p>
<br>
<p>*** No script, no hassle ***</p>
<p>From spring 2017, eBay is going to ban Active Content, plug-ins and dynamic content in the item description. This template is prepared for the change. This template does not contain any Active Content, plug-ins and dynamic content.</p>
<br>
<h1>Features of this listing template:</h1>
<ul>
<li><strong>Responsive Design</strong>&nbsp;(Mobile, Tablet &&nbsp;<b>eBay App</b>&nbsp;optimized)</li>
<li>Template can be used to<b>&nbsp;list any type of products</b></li>
<li>Template&nbsp;<b>can be used with or without subscription to eBay Shop/Store</b></li>
<li>Maximum 4 images in the Image Gallery</li>
<li>Completely&nbsp;<strong>Flexible</strong>&nbsp;&&nbsp;<strong>Editable</strong></li>
<li>Shop categories (<strong>NOT dynamic/automatic</strong>)</li>
<li>100% eBay Policy Violation Free</li>
<li>Template is compatible with All Desktop Browsers and Mobile Browsers</li>
</ul>
<br>
<h1>The following services we carry out free of charge:</h1>
<p class="text-left"><i class="fa fa-check-square-o"></i>&nbsp;Add your logo into the template</p>
</div>
</div>&nbsp;</div>
<div id="tab-content2" class="tab-content"><div class="box-one">
<p>SECURE PAYMENTS</p>
<p>We accept payments by Paypal Bank Transfer, UK Cheque.</p>
<img src="http://pearbrand.eu/ebay-shops/EN/2/7/template/img/payment-icons.png">&nbsp;</div>
<br>
<h1>Payment Information</h1>
<p><span style="font-weight: 700;">*** If you are facing problems, we assure you that we will provide full assistance to resolve any problems you are facing. Simply send us a message through the eBay Messaging system.</span></p>
<p></p>
</div>
<div id="tab-content3" class="tab-content"><div class="box-one">
<p>DELIVERY</p>
<p>Fast & cheap</p>
<p>All of our items are packaged securely and shipped by one of the following methods:</p>
<img src="http://pearbrand.eu/ebay-shops/EN/2/7/template/img/delivery-icons.png">&nbsp;</div>
<br>
<h1>Shipping Information</h1>
<p>After payment you will receive the template files within 24 hours via email to your PayPal email address.</p>
<p>Complete Auction Template</p>
<p>Instructions file</p>
</div>
<div id="tab-content4" class="tab-content"><div class="box-one">
<p>DELIVERY</p>
<p>Fast & cheap</p>
<p>All of our items are packaged securely and shipped by one of the following methods:</p>
<img src="http://pearbrand.eu/ebay-shops/EN/2/7/template/img/delivery-icons.png">&nbsp;</div>
<br>
<h1>Returns Information</h1>
<p>Refund is only acceptable before we send out the files to you.</p>
<p><strong>*** If you are facing problems, we assure you that we will provide full assistance to resolve any problems you are facing. Simply send us a message through the eBay Messaging system.</strong></p>
</div>

He probado casi de todo pero no logro dar con la solución.

Muchas gracias y un saludo para todos.
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 Lopez
Val: 886
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Activar tab o etiqueta especifica con el menú interno.

Publicado por Lopez (271 intervenciones) el 13/10/2017 15:59:15
Hola Luis,

Veo usas bootstrap, lo cual simplifica un poco las cosas.
Tu código esta un poco desordenado y hace dificil leerlo,
pero te dejo un ejemplo que te servirá perfecto ;)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul class="nav menu-tabs">
    <li><a href="#uno" data-toggle="tab">UNO</a></li>
    <li><a href="#dos" data-toggle="tab">DOS</a></li>
    <li><a href="#tres" data-toggle="tab">TRES</a></li>
</ul>
 
 
 
$(window).load(function(){
function activaTab(tab){
    $('.menu-tabs a[href="#' + tab + '"]').tab('show');
};
 
activaTab('dos'); //FOCUS EN CIERTO TAB
});

Cuentanos que tal.
Saludos!
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

Activar tab o etiqueta especifica con el menú interno.

Publicado por Luis (5 intervenciones) el 16/10/2017 10:08:38
Buenos días Lopez,

No he logrado hacer que funcione, le he enviado un mensaje privado.

Gracias por su ayuda.

Si alguien me puede ayudar le estaré agradecido. Quiero crear un enlace interno para que te lleve y active un tab especifico desde el menú.

Un saludo para todos
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 Lopez
Val: 886
Plata
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Activar tab o etiqueta especifica con el menú interno.

Publicado por Lopez (271 intervenciones) el 18/10/2017 05:31:48
Luis,

Debajo de esta explicacion, va el código listo.
Para solucionar tu problema, usamos el evento onclick="" clasico de JS.
Y dentro de él ponemos el llamado al link interno.


1
2
3
4
<input onclick="window.location='#extra'" name="tabs" id="tab5" class="extra" type="radio">
                           <label for="tab5"><span>Extra</span></label>
 
<div id="extra">YO SOY EL CONTENIDO INTERNO Y ME LLAMO "EXTRA"</div>


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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!--<table style="tabla2" border-spacing:="" 0px;="" width:="" 100%;"="" align="center">-->

<table style="tabla2"  align="center">


<tr>

   <td>

      <div id="ds_div">

         &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;

         <span rwr="1" style="font-family: Arial; font-size: 14pt;">

            
            <div class="container-fluid bg" align="center">

               <div class="container" style="">

                  <div class="row allcontent" style="position: relative;">

                     <div class="col-md-10 col-md-push-2 maincontent" style="z-index: 2;">

                        <div class="tabs"><!-- MENU TABS -->

                           <input name="tabs" id="tab1" checked="" style="" type="radio">
                           <label for="tab1"><span>Descripción</span></label>
                           
                           <input name="tabs" id="tab2" style="" type="radio">
                           <label for="tab2"><span>Pagos</span></label>
                           
                           <input name="tabs" id="tab3" style="" type="radio">
                           <label for="tab3"><span>Envíos</span></label>
                           
                           <input name="tabs" id="tab4" style="" type="radio">
                           <label for="tab4"><span>Devoluciones</span></label>
                           
                           
                           <!-- AÑADO UN NUEVO ELEMENTO Y USO onclick="window.location='#extra'"  -->
                           <input onclick="window.location='#extra'" name="tabs" id="tab5" class="extra" type="radio">
                           <label for="tab5"><span>Extra</span></label>
 
                           <div id="tab-content1" class="tab-content"><!-- tab-content1 -->
 
                              <div class="row">
 
                                 <div class="col-sm-6"></div>
 
                                 <div class="col-md-12">
 
                                    <br>
 
                                    <h1>Info</h1>
 
                                    <br>
 
                                    <p style="font-size:18px; font-weight:bold;">Estado del Artículo: Nuevo<br></p>
 
                                    <br>
 
                                    <p>Artículos importados de Alemania procedentes de embargos, lotes, subastas, sobreprodución, etc. Una buena oportunidad para adquirir artículos de muy alta calidad con descuentos de hasta un 70%. Todos nuestros artículos son revisados y embalados cuidadosamente por personal cualificado para garantizar que nuestros clientes reciben el artículo que han adquirido sin sorpresas desagradables. <br></p>
 
                                    <br>
 
                                    <h1>Clasificación de los Artículos:</h1>
 
                                    <ul>
 
                                       <li>Nuevos</li>
 
                                       <li>Nuevos con pequeñas taras<br></li>
 
                                       <li>Nuevos con embalaje ligeramente dañado<br></li>
 
                                       <li>Nuevos sin embalaje original<br></li>
 
                                       <li>Nuevos con embalaje abierto<strong></strong><strong></strong></li>
 
                                       <li>Artículos devueltos en tienda<strong><br>
 
                                          </strong>
 
                                       </li>
 
                                       <li>Artículos Usados<br></li>
 
                                       En cualquier caso, siempre indicaremos el estado del artículo en la descripción del mismo, por favor leea toda la información antes de realizar su compra. <br>
 
                                       <br>
 
                                       <br>
 
                                    </ul>
 
                                    <h1><br></h1>
 
                                 </div>
 
                              </div>
 
                           </div><!-- / tab-content1 -->
 
                           <div id="tab-content2" class="tab-content">
 
                              <br>
 
                              <h1>Payment Information</h1>
 
                              <p>We accept PayPal payment.</p>
 
                              <img src="http://www.web-marx.de/eBay/ZaVe-Icons/zahlung-paypal.jpg">
 
                           </div>
 
                           <div id="tab-content3" class="tab-content">
 
                              <br>
 
                              <h1>Shipping Information</h1>
 
                              <p>After payment you will receive the template files within 24 hours via email to your PayPal email address.</p>
 
                              <p>Complete Auction Template</p>
 
                              <p>Instructions file</p>
 
                           </div>
 
                           <div id="tab-content4" class="tab-content">
 
                              <br>
 
                              <h1>Returns Information</h1>
 
                              <p>Refund is only acceptable before we send out the files to you.</p>
 
                              <p><strong>*** If you are facing problems, we assure you that we will provide full assistance to resolve any problems you are facing. Simply send us a message through the eBay Messaging system.</strong></p>
 
                           </div>
 
                        </div>
 
                     </div><!-- / menu tabs -->
 
                     <div class="col-md-2 col-md-pull-10 sidebar">
 
                        <h2>Exceptional Service</h2>
 
                        <p><img src="https://s20.postimg.org/iqfm1shfx/money_back.png" style="width:100%;"></p>
 
                        <br>
                        <h2>Shipping</h2>
                        <p><img src="https://s20.postimg.org/3x5jurz2l/shipping1.png" style="width:100%;"></p>
                        <br>
                        <h2>Payment Methods</h2>
                        <p><img src="https://s20.postimg.org/iue0vscb1/paypal_logo.png" style="width:100%;"></p>
                     </div>
                  </div>
               </div>
            </div>
         </span>
      </div>
   </td>
</tr>
</table>
<div id="extra"><!-- AÑADIDA POR MI -->
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</div><!-- / AÑADIDA POR MI -->

Saludos!
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