पृष्ठ पर एक विशिष्ट टैब खोलने के लिए मुझे एक लिंक कैसे प्राप्त होगा?

Question

मैं ऐसे क्लाइंट के लिए site पर काम कर रहा हूं जिसमें jquery संचालित टैबड सामग्री है।

सही पृष्ठ से लिंक करना काफी आसान है, लेकिन जब आप वहां पहुंचते हैं तो चुनौती सही टैब पर खुलती है। पृष्ठ पर नीचे स्क्रॉल करें और पर क्लिक करें आइकन (ट्रक वाला एक) इसे ले जाएं। यह आपको move it page पर ले जाता है। यह ठीक काम करता है, लेकिन मैं इसे विशेषता टैब खोलने में सक्षम होना चाहता हूं।

यहाँ कोड है कि पृष्ठ से लिंक है:

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

मैं इस कोशिश की, लेकिन इसे सही ढंग से काम नहीं करता है

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

यहाँ गंतव्य पृष्ठ पर टैब के लिए कोड है:

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

यहाँ टैब के संचालन के लिए jQuery है:

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

क्योंकि मुझे इसे एकाधिक लिंक/टैब combos पर करने की आवश्यकता होगी, मैं एक व्यवस्थित दृष्टिकोण ढूंढना चाहता हूं।

किसी भी मदद के लिए धन्यवाद!

Answer 1

यह आसानी से मानक jQuery यूआई टैब्स विजेट के साथ एरियल Flesler के jQuery प्लग इन का उपयोग कार्यान्वित किया जाता है:

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

आप पाएंगे ब्लॉग पोस्टिंग में एक विस्तृत "कैसे करें":

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

यह दृष्टिकोण कोड का एक न्यूनतम राशि की आवश्यकता है और अपने सभी पृष्ठों में सामान्यीकृत किया जा सकता।

सबसे पहले, jQuery UI टैब विजेट का उपयोग करके टैब सेट अप करें।

पृष्ठों कि टैब का उपयोग पर jQuery प्लगइन्स को शामिल करें:

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

फिर जोड़ने इस (प्रतिस्थापन "#tabs" आप उपयोग कर रहे जो कुछ div के लिए):

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

और बस हो गया !

Answer 2

मुझे हैशपार्ट को संभालने के लिए जेएस कोड चाहिए। यह कुछ हद तक ऐसा लग सकता है।

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

अपने हैंडलर को संलग्न करने के बाद इसे रख दें। अब आपका लिंक काम करना चाहिए।

Answer 3

मैंने हाल ही में अपने स्वयं के टैब बनाने की कोशिश की। मैं अपनी आवश्यकताओं फिट करने के लिए कोड बदल गया है, लेकिन मुझे यकीन है कि अगर यह काम करता है नहीं कर रहा हूँ:

सुनिश्चित करें कि आपके लिंक की आईडी आप #

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

के बाद क्या डाल के रूप एक ही है उम्मीद है की यह मदद करेगा!

संपादित करें:

नीचे कोड (टिप्पणी देखें) सक्रिय करने के लिए टैब लिंक स्थापित करने के लिए अपने संरचना के आधार पर है।

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

कोड से ऊपर भी सहायक है।