Intentando enlazar con contenido de pestañas desde un enlace externo [cerrado]
Terriblemente frustrado y avergonzado de no poder resolver esto. El cliente desea un mapa del sitio en la parte inferior del sitio web que lleva al usuario a cualquier página y cualquier pestaña dentro de esa página con un solo clic. Debería ser lo suficientemente fácil de hacer, pero por alguna razón, no puedo envolver mi cerebro alrededor de eso. En el esfuerzo de la honestidad completa, soy un artista, con el conocimiento de código suficiente para ser peligroso. No puedo escribir JQuery por mi cuenta, pero puedo leer las cosas ya escritas y entender lo que está pasando, en su mayor parte.
Ejemplo 1- Contact.php posee funcionalidad básica
Ejemplo 2: TabTest1.html Pude tomar la información de las preguntas de .com de stackoverflow 10616833 / link-to-anchor-inside-tab-content-from-an-external-link y hacer que funcione. El guión allí en realidad no funciona (para mí). Me tomó un día, pero me di cuenta de lo que era (paréntesis, como de costumbre) y lo que ve es esa información en el trabajo. Desafortunadamente, no solo se conecta a mi código ya existente. He intentado un par de maneras diferentes, pero no entiendo completamente lo que está pasando en el jsfiddle.
Ejemplo 2- ContactRE.php Este es mi mejor intento de trabajar con el código dado en la pregunta anterior. Me siento abrumado. Puede hacer clic en las pestañas y ver qué está haciendo, pero después de hacer clic en cualquier pestaña, todas se iluminan según lo seleccionado, pero el contenido no cambia en absoluto. Tengo la sospecha de que tiene algo que ver con el "// return false"; antes de la frase "si", porque al anular el comentario, todo vuelve a funcionar, pero aún no puede vincularse a la pestaña individual desde el exterior. Cuando está activado, parece que ContactRE.php # Social se enlaza, pero solo después de escribirlo, presionar Entrar, esperar y luego presionar Actualizar.
Ejemplo 4 index.php Puede ver que es similar al Ejemplo 1, simplemente una página diferente para probar el enlace. No funciona El contenido de la pestaña simplemente desaparece.
Tanto para los ejemplos 1, 2 y 4, puedes ver que intenté resolver esto por mi cuenta antes de siquiera llegar a los foros en la clase "BottomInfo", donde se ubicará el mapa del sitio. Links3 es con el que comencé cuando me di cuenta del sistema que pensé que funcionaría, en Links2 y Links1 no lo iba a cortar. Simplemente tomé los enlaces que constituyen las pestañas, eliminé el estilo a través de CSS e hice la lista. Funciona para su página respectiva, pero no para enlazar externamente.
He creado un JSFiddle, para aquellos que lo prefieran. No soy muy bueno para entender un "hey, solo agrega esto y de repente, ¡magia!" seguido de fragmentos de código, a menos que vengan con grandes explicaciones. Tal vez algún día, simplemente no todavía.http://jsfiddle.net/ANCannan/CfGHp/
A continuación se encuentra mi JS en funcionamiento, pero no puedo usar un hash en la URL para vincular a las pestañas externamente
<script type= "text/javascript">
$(document).ready(function(){
// When user clicks on tab, this code will be executed
$("#tabs li").click(function() {
// First remove class "active" from currently active tab
$("#tabs li").removeClass('active');
// Now add class "active" to the selected/clicked tab
$(this).addClass("active");
// Hide all tab content
$(".tab_content").hide();
// Here we get the href value of the selected tab
var selected_tab = $(this).find("a").attr("href");
// Show the selected tab content
$(selected_tab).fadeIn();
// At the end, we add return false so that the click on the link is not executed
return false;
});});
</script>
Este es mi intento de Frankenstein JS de hacer que las pestañas se puedan vincular mediante un hash en la URL
<script type= "text/javascript">
$(document).ready(function(){
// When user clicks on tab, this code will be executed
$("#tabs li").click(function() {
// First remove class "active" from currently active tab
$("#tabs li").removeClass('active');
// Now add class "active" to the selected/clicked tab
$(this).addClass("active");
// Hide all tab content
$(".tab_content").hide();
// Here we get the href value of the selected tab
var selected_tab = $(this).find("a").attr("href");
// Show the selected tab content
$(selected_tab).fadeIn();
// At the end, we add return false so that the click on the link is not executed
return false;
});
if (window.location.hash !== '') {
var $targetAnchor = $(document.location.hash);
// Grab the ID of the .tab-content that the hash is referring to
tabId = $targetAnchor.closest('.tab_content').attr('id');
// Find the anchor element to "click", and click it
$("#tabs li").find('a[href=#' + tabId + ']').click();
$('html, body').animate({
scrollTop: $targetAnchor.offset().top
});
}
$('a').not('.tabs li a').on('click', function(evt) {
evt.preventDefault();
var whereTo = $(this).attr('goto');
$tabs = $("ul.tabs li");
$tabs.find('a[href=#' + whereTo + ']').trigger('click');
alert(attr('name'));
alert( $('#'+whereTo+' a').offset().top );
$('html, body').animate({
scrollTop: $('#'+whereTo+' a').offset().top
});
});
$(function() {
$('a.refresh').live("click", function() {
location.reload();
});
});});
</script>
Este es mi HTML abreviado
<div class= "Centered" id="TextContent">
<div id="tabs_container">
<ul id="tabs">
<li>
<div class= "Centered" id="TextContent2">
<div id="tabs_container2">
<ul id="tabs2">
<li class="active">
<div class= "LinkText" id="TT1"> <a class="icon_accept" href="#Before">Before</a></div>
</li>
<li>
<div class= "LinkText" id="TT2"> <a class="icon_accept" href="#During">During</a></div>
</li>
<li>
<div class= "LinkText" id="TT3"> <a class="icon_accept" href="#After">After</a></div>
</li>
</ul><!---Ends ul id "tabs" container2-->
</div><!---Ends "tabs_container2"-->
</div><!---Ends "Centered Text Content2"-->
</li>
</ul><!---Ends ul id "tabs-->
</div><!---Ends "tabs-container"-->
<div id="tabs_content_container">
<div id="Before" class="tab_content" style="display: block;">
<img src="Images/before.png" class="alignLeft" alt="CMC and QA Icons"><p>Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.</p>
<p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.</p><p>Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.</p>
<p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.</p>
</div><!---Ends Before container-->
<div id="During" class="tab_content" style="display: block;">
<p>In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.</p>
<p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.</p>
<p>Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.</p>
<p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.
</div><!---Ends "During"-->
<div id="After" class="tab_content">
<img src="Images/after.png" class="alignRight" alt="CMC and QA Icons">
<p> <p>Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.</p>
<p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.</p>
<p>Sed do eiusmod tempor incididunt consectetur adipisicing elit, duis aute irure dolor. In reprehenderit in voluptate quis nostrud exercitation eu fugiat nulla pariatur. Ullamco laboris nisi qui officia deserunt lorem ipsum dolor sit amet. In reprehenderit in voluptate cupidatat non proident, sed do eiusmod tempor incididunt.</p>
<p>Ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, in reprehenderit in voluptate ut enim ad minim veniam. Lorem ipsum dolor sit amet, quis nostrud exercitation velit esse cillum dolore. In reprehenderit in voluptate excepteur sint occaecat eu fugiat nulla pariatur.</p>
</div><!---Ends "After"-->
He leído lo siguiente y he intentado implementarlo de varias maneras, aunque ninguna funcionó. Incluso he intentado aplicar algo de la estructura de pensamiento del acordeón, ya que la gente parece hacer la misma pregunta sobre los acordeones, pero no soy bueno aplicándolo a las pestañas.
Preguntas relacionadas sobre stackoverflowlink-to-an-anchor-within-jquery-tabbed-contentno se puede llamar al contenido específico de un archivo externo dentro de jqueryuse-one-jquery-code-for-all-tabscómo-para-vincular-directamente-a-jquery-acordeón-tablink-to-open-jquery-accordionjquery-tabs-link-to-another-tab-from-insideTema de JQuery / link-to-tab-from-outside-tabs-div
Perdón por la falta de enlaces, aparentemente solo puedo publicar 2.
ACTUALIZACIÓN PRINCIPAL 19 de octubre, 1 p.m. ET ET No he solucionado completamente mi problema, pero ahora puedo enlazar a una URL específica desde fuera del sitio web (o escribirla), sin embargo, si estoy en la página, la URL se actualiza cuando hago clic el enlace dentro de la página o escríbalo manualmente, pero no cambia el contenido hasta que uno hace clic en "actualizar". La pagina eshttp://certus.worldpath.net/crazy.html Enlace directamente a una pestaña agregando "#Email" al final. ¿Pensamientos?
Apreciaré enormemente cualquier ayuda que me puedan dar.