Làm cách nào để nhận được liên kết để mở một tab cụ thể trên một trang?

Question

Tôi đang làm việc theo số site cho khách hàng có nội dung được gắn thẻ jquery.

Liên kết đến đúng trang là đủ dễ dàng, nhưng thử thách là mở tab chính xác khi bạn đến đó. Trên cuộn trang về phía dưới cùng và nhấp vào biểu tượng Di chuyển biểu tượng (biểu tượng có xe tải). Thao tác này sẽ đưa bạn đến số move it page. Điều này hoạt động tốt, nhưng tôi muốn nó có thể mở tab Đặc biệt.

Đây là đoạn mã liên kết đến trang:

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

tôi đã cố gắng này, nhưng nó không hoạt động một cách chính xác

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

Đây là mã cho các tab trên trang đích:

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

Đây là câu hỏi để vận hành các tab:

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

Vì tôi sẽ cần thực hiện điều này trên nhiều combo/liên kết tab Tôi muốn tìm cách tiếp cận có hệ thống.

Cảm ơn bạn đã trợ giúp!

Answer 1

này được thực hiện dễ dàng sử dụng các plugin jQuery Ariel Flesler cùng với các phụ tùng tiêu chuẩn jQuery UI Tabs:

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

Bạn sẽ tìm thấy chi tiết "cách" trong bài đăng trên blog tại:

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

Cách tiếp cận này đòi hỏi một số lượng tối thiểu của mã và có thể được khái quát hóa trên tất cả các trang của bạn.

Trước tiên, hãy thiết lập các tab bằng cách sử dụng tiện ích Tab giao diện người dùng jQuery.

Bao gồm các plugin jQuery trên các trang sử dụng tab:

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

Sau đó thêm này (thay thế "#tabs" cho bất cứ điều gì div bạn đang sử dụng):

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

Và đó là nó !

Answer 2

Tôi cần mã JS để xử lý hashpart. Nó có thể trông hơi giống thế này.

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

Đặt sau khi bạn đính kèm trình xử lý. Bây giờ liên kết của bạn sẽ hoạt động.

Answer 3

Gần đây, tôi đã cố gắng tạo tab của riêng mình. Tôi đã thay đổi mã để phù hợp với nhu cầu của bạn, nhưng tôi không chắc chắn nếu nó hoạt động:

Hãy chắc chắn rằng các id của liên kết của bạn là giống như những gì bạn đặt sau khi #

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

Hi vọng điêu nay co ich!

Edit:

Đoạn code dưới đây là để thiết lập các liên kết tab để hoạt động (xem bình luận) dựa trên cấu trúc của bạn.

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

mã trên cũng hữu ích.