Wie erhalte ich einen Link zum Öffnen eines bestimmten Tabs auf einer Seite?

Question

Ich arbeite an einem site für einen Client, der jquery Tabbed-Inhalt hat.

Die Verknüpfung mit der richtigen Seite ist leicht genug, aber die Herausforderung besteht darin, auf der richtigen Registerkarte zu öffnen, wenn Sie dort ankommen. Blättern Sie auf der About-Seite nach unten und klicken Sie auf das Symbol Verschieben Sie es (das mit dem LKW). Dies bringt Sie zum move it page. Das funktioniert gut, aber ich möchte es in der Lage sein, die Specialty Registerkarte zu öffnen.

Hier ist der Code, der auf der Seite Links:

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

Ich versuche dies, aber es funktioniert nicht richtig

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

Hier ist der Code für die Registerkarten auf der Zielseite:

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

ist hier die jquery für den Reiter Betrieb:

$(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(); 
}); 

Da ich dies auf mehrere Link/Tab-Combos tun muss, würde ich gerne einen systematischen Ansatz finden.

Danke für jede Hilfe!

Answer 1

Dieser leicht unter Verwendung zusammen mit dem Standard-jQuery UI Tabs Widget Ariel Flesler jQuery Plugins implementiert:

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

Sie finden ein detailliertes "how to" im Blogbeitrag unter:

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

Dieser Ansatz erfordert eine minimale Menge an Code und kann auf allen Ihren Seiten verallgemeinert werden.

Zuerst Registerkarten mit dem Widget jQuery UI Tabs einrichten.

Fügen Sie die jQuery-Plugins auf den Seiten, die Registerkarten:

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

Dann dieses Add (Substitution "#tabs" für was auch immer div Sie verwenden):

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

und das ist es !

Answer 2

Ich brauche JS-Code, um einen Hash-Teil zu behandeln. Es könnte ungefähr so ​​aussehen.

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')); 

Setzen Sie dies, nachdem Sie Ihren Handler anschließen. Jetzt sollte dein Link funktionieren.

Answer 3

Ich habe vor kurzem versucht, meine eigenen Tabs zu bauen. Ich änderte den Code an Ihre Bedürfnisse anzupassen, aber ich bin nicht sicher, ob es funktioniert:

Stellen Sie sicher, die ID Ihrer Verbindung der ist die gleiche wie das, was Sie nach dem # setzen

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 
    }); 

Hoffe das hilft!

Edit:

Der folgende Code ist die Registerkarte Link auf aktiv zu setzen (siehe Kommentar) auf der Grundlage Ihrer Struktur.

$(".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"); 
    }); 

obiger Code ist auch hilfreich.