Soy un escritor técnico que usa MadCap Flare para crear una salida en línea. Naturalmente, no tengo ni idea en lo que respecta a la codificación, pero tengo un nivel de principiante de conocimiento de CSS y HTML5, con incluso un poco menos de conocimiento de javascript.
Usando recursos y artículos en línea, logré implementar una versión mayormente funcional de las pestañas dentro de una página web, pero estoy luchando para descubrir cómo vincular a un lugar específico dentro de las pestañas. Actualmente, la página web cargará la primera pestaña de forma predeterminada, pero necesito poder vincular a un encabezado específico en la segunda o tercera pestaña.
Aquí está mi javascript actual (solo se usa para cambiar entre pestañas):
$(document).ready(function(){ $('ul.tabs li').click(function(){ var tab_id = $(this).attr('data-tab'); $('ul.tabs li').removeClass('current'); $('.tab-content').removeClass('current'); $(this).addClass('current'); $("#"+tab_id).addClass('current'); }) })No estoy seguro de cuán relevante, pero aquí está el script que tengo en mi MasterPage.
<script src="../Scripts/new_tabs.js" type="application/javascript"> </script>Aquí está mi código html actual:
<ul class="tabs"> <li class="tab-link current" data-tab="tab-1"><a name="Tab1">Tab 1 Label</a></li> <li class="tab-link" data-tab="tab-2"><a name="Tab2">Tab 2 Label</a></li> <li class="tab-link" data-tab="tab-3"><a name="Tab3">Tab 3 Label</a></li> </ul> <div class="tab-content current" id="tab-1"> <p>Tab 1 content goes here</p> </div> <div class="tab-content" id="tab-2"> <p>Tab 2 content goes here</p> </div> <div class="tab-content" id="tab-3"> <p>Tab 3 content goes here</p> </div>Como mínimo, necesito la capacidad de vincular a una pestaña específica desde otras páginas del sitio, pero lo ideal sería poder vincular contenido específico dentro de las pestañas, como Head1 o una etiqueta ap.
¿Alguien puede ayudar a un no programador en apuros?
Por lo que entiendo, está utilizando JS para administrar qué pestaña y qué contenido están actualizados. Dado que no está colocando cada contenido en su propia página y está creando un sitio de una sola página, solo puedo pensar que esto funcionaría de una manera.
Puede usar parámetros de búsqueda para enviar datos específicos de un lado a otro entre sus otras páginas. Por ejemplo:
Con esto, puede enviar pares de datos clave/valor a otras páginas. Su etiqueta <a> se verá así en sus otras páginas:
<a href="http://yourwebsite.com/?tab=2">Enlace a la pestaña 2</a>
Puede obtener los datos en su página principal haciendo algo como:
$(document).ready(function(){ let params = new URLSearchParams(location.search); let currentTab = params.get('tab') || 1; $('ul.tabs li').removeClass('current'); $('.tab-content').removeClass('current'); $('li[data-tab=tab-' + currentTab + ']').addClass('current'); $("#tab-"+currentTab).addClass('current'); $('ul.tabs li').click(function(){ var tab_id = $(this).attr('data-tab'); $('ul.tabs li').removeClass('current'); $('.tab-content').removeClass('current'); $(this).addClass('current'); $("#"+tab_id).addClass('current'); }); });Repasemos el código agregado. Primero, tenemos:
let params = new URLSearchParams(location.search);Esto es bastante sencillo. location.search devolverá nuestros parámetros de búsqueda como una cadena. En nuestro caso, podría ser "?tab=2" . Luego usamos la nueva API web URLSearchParams() para convertir la cadena que obtuvimos de location.search en un objeto para que podamos acceder/modificar sus datos más fácilmente. El objeto resultante se asigna a la variable params .
Entonces tenemos:
let currentTab = params.get('tab') || 1;Esto asignará currentTab con el valor del parámetro de búsqueda "tab" o el número 1 en caso de que params.get('tab') no esté definido (el número 1 es la pestaña predeterminada que desea que los usuarios vean si no hay búsqueda parámetro proporcionado, es decir, fueron a su página sin hacer clic en los enlaces de sus otras páginas).
Por último, tenemos:
$('ul.tabs li').removeClass('current'); $('.tab-content').removeClass('current'); $('li[data-tab=tab-' + currentTab + ']').addClass('current'); $("#tab-"+currentTab).addClass('current');Esto elimina todas las clases actuales de todos los elementos de la lista y divisiones de contenido de pestañas. Luego encontrará la pestaña y el div de contenido de la pestaña en función de nuestro valor de tabulación actual que obtuvimos anteriormente.
De esta forma, si tus usuarios van a:
luego, la segunda pestaña y su div asociado deben recibir la clase actual .
Espero que esto ayude.
~A