¿Cómo obtengo un enlace para abrir una pestaña específica en una página?

Question

Estoy trabajando en un site para un cliente que tiene contenido tabulado impulsado por jquery.

Vincular a la página correcta es bastante fácil, pero el desafío es abrir la pestaña correcta cuando llegues allí. En la página de aproximadamente desplácese hasta la parte inferior y haga clic en el icono Moverlo (el del camión). Esto te lleva al move it page. Esto funciona bien, pero me gustaría que sea capaz de abrir la pestaña Especialidad.

Este es el código que se vincula a la página:

<li><a id="moveit" href="services_move_it.html">Move It</a></li> 

He intentado esto, pero no funciona correctamente

<li><a id="moveit" href="services_move_it.html#specialty">Move It</a></li> 

Este es el código para las fichas de la página de destino:

<div id="specialty-content" class="content"> 
    <p class="intro">Moving Simplified specializes in moving items such items as pool tables, pianos, antiques, and anything else you can throw at us.</p> 
    <div class="video-link"> 
    <a href="#">Watch the Move It Specialty Videos Now.</a> 
    </div> 
    <p> Moving such items is more complicated than most would understand, and is an art form in itself. We take pride in making sure that your priceless possessions are delivered damage free. The employees sent to move your belongings are highly experienced in these types of items. They will always be well equipped to complete the move with the most up to date technology in the moving industry.</p><p> We will always pad and wrap each individual piece, as well as provide custom crates to ensure the safety of your pool table slate.</p> 
    <div class="msg"> 
    <p><strong>Want to download the Move It Specialty guide?</strong> Go here <a href="#">now</a>.</p> 
    </div> 
</div> 

Aquí es el jQuery para el funcionamiento de las fichas:

$(document).ready(function() { 
/* this is for the tabbed content */ 
$("a.tab").click(function(evt) { 
    evt.preventDefault(); 
    $(".active").removeClass("active"); 
    $(this).addClass("active"); 
    $(".content").slideUp(); 

    var content_show = $(this).attr("id"); 
    $("#" + content_show + '-content').slideDown(); 
}); 

Porque tendré que hacer esto en múltiples combos de enlace/pestaña Me gustaría encontrar un enfoque sistemático.

¡Gracias por cualquier ayuda!

Answer 1

Esto es fácil de implementar el uso de plugins jQuery de Ariel Flesler junto con el dispositivo estándar de jQuery UI aquí:

• jQuery UI Tabs widget
• jQuery.LocalScroll
• jQuery.ScrollTo

Encontrará un "cómo" detallado en la publicación del blog en:

http://weblog.muledesign.com/2009/05/bookmarkable_tabs_with_jquery_ui.php

Este enfoque requiere una cantidad mínima de código y se pueden generalizar en todas las páginas.

Primero, configure las pestañas usando el widget jQuery UI Tabs.

Incluir los plugins jQuery en las páginas que utilizan fichas:

<script src="/javascripts/jquery.localscroll.js?1281125099" type="text/javascript"></script> 
<script src="/javascripts/jquery.scrollTo.js?1281125099" type="text/javascript"></script> 

a continuación, añadir esta (sustituyendo "#tabs" por cualquier div que está utilizando):

$(document).ready(function() { 
    if($("#tabs") && document.location.hash){ 
    $.scrollTo("#tabs"); 
    } 
    $("#tabs ul").localScroll({ 
    target:"#tabs", 
    duration:0, 
    hash:true 
    }); 
}); 

Y eso es todo !

Answer 2

Necesito el código JS para manejar un hashpart. Podría verse algo como esto.

handleHashPart = function(tabs) { 
    var hashPart = window.location.hash; 
    if (! hashPart || hashPart.length === 0) { 
    return; 
    } 
    tabs.each(function() { 
    var link = $(this); 
    if (link.attr('href') == hashPart) { 
     link.trigger('click'); 
     return false; 
    } 
    return true; 
    }); 
}; 

handleHashPart($('a.tab')); 

Ponga esto después de conectar su controlador. Ahora tu enlace debería funcionar.

Answer 3

Recientemente traté de crear mis propias pestañas. He cambiado el código para satisfacer sus necesidades, pero no estoy seguro si funciona:

Asegúrese de que el ID de su enlace es la mismo que lo que se pone después de la #

var curtab = window.location.href; // Get the url 
    curtab = curtab.split("#"); // Split the url at # 
    curtab = "#" + curtab[1]; // Put the info after the # in a variable 

    $("a.tab").each(function(i){ // Loop through all links and compare tab from url with value in link 
     if(curtab == $(this).attr("href")){ 
      $(this).addClass("active"); // If they are the same, set that tab's class to active 
     } 
    }); 

$("a.tab").click(function(){ // Select tab 
     $(".active").removeClass("active"); // Select the a, remove class for every link 
     $(this).addClass("active"); // Select the clicked tab and add an active class 
     var tabtocall = $(this).children().attr("href"); // Var to select current clicked tab 
     $(".content").slideUp; // Slide up all content 
     $(tabtocall).slideDown("normal"); // Slide down the selected content 
    }); 

¡Espero que esto ayude!

Editar:

El código siguiente es establecer el vínculo de la ficha de activo (ver comentario) en función de su estructura.

$(".tabs a").each(function(i){ // Loop through all the links 
     if(curtab == $(this).attr("id")){ // Compare the value from the url with the id 
      $(this).addClass("active"); // If equal add class active 
     } 
    }); 

Answer 4

$('.LinkSelector').click(function(){ 
    $("#tabs").tabs("select", "#tabs-1"); 
    }); 

código anterior también es útil.