HTML鏈接觸發某些jQuery選項卡

在尋找解決方案似乎很長時間後，我認爲是時候問問專家。HTML鏈接觸發某些jQuery選項卡

我已經在我的網站上實現了jQuery選項卡，但是還要選擇一個選項卡來顯示內容，如果您單擊頁面上其他標準html鏈接，我也希望能夠顯示不同的選項卡內容。

頁面可以在這裏看到http://www.luxury-spa-breaks.com/spa-deals-TEST.html和問題的html鏈接是左手邊的那些（例如，用戶可以選擇他們想要的標籤，或者從左邊選擇一個區域，然後顯示那個區域標籤內容）。

這是JS我目前有：

$(document).ready(function() { 

//When page loads... 
$(".tab_content").hide(); //Hide all content 
$("ul.tabs li:first").addClass("active").show(); //Activate first tab 
$(".tab_content:first").show(); //Show first tab content 

//On Click Event 
$("ul.tabs li").click(function() { 
    $("ul.tabs li").removeClass("active"); //Remove any "active" class 
    $(this).addClass("active"); //Add "active" class to selected tab 
    $(".tab_content").hide(); //Hide all tab content 

    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
    $(activeTab).fadeIn(2000); //Fade in the active ID content 
    return false; 
}); 
});

你的幫助是大規模感謝！

安迪

來源

2010-11-14 Motley9735

添加相同的功能的最簡單的方法是將tabs類添加到邊欄左側，或可選地，添加該選擇工具欄菜單的選擇器的選項卡的選擇器。

在這一點上，我建議換掉你在那裏的代碼，我重寫了另一個堆棧溢出問題。符合最佳實踐，效率更高，清潔度更高。

var tabContents = $(".tab_content").hide(), 
    tabs = $("ul.tabs li, .anynavbar ul li"); // Second selector to match left hand sidebar 

tabs.first().addClass("active").show(); 
tabContents.first().show(); 

tabs.click(function() { 
    var $this = $(this), 
     activeTab = $this.find('a').attr('href'); 

    if(!$this.hasClass('active') && activeTab.length > 1 && activeTab.indexOf('#') === 0){ 
     $this.addClass('active').siblings().removeClass('active'); 
     tabContents.hide().filter(activeTab).fadeIn(); 
    } 

    return false; 
});

通過執行上述任一操作，我們可以添加必要的事件處理程序以使標籤更改。

我也編輯了代碼，添加一個簡單檢查有效的href值，以便與您的HTML一起使用，其中一些錨點缺少正確的相應href值來激活正確的選項卡。此外，看看你現在使用的代碼，你已經錯過了});在document.ready處理程序的末尾，這就是爲什麼代碼不起作用。

來源

2010-11-14 12:03:11

嗨Yi Jang，感謝上述......我完全按照上面的方法複製了代碼，以取代已存在的jquery標籤代碼，它從來沒有工作過。每個選項卡式內容區域都列在另一個下面，而不是在點擊之前隱藏。任何想法我做錯了什麼？再次感謝！ – Motley9735 2010-11-14 12:43:09

@user您是否將它包含在'document.ready'事件處理程序中？ – 2010-11-14 12:58:26

@user此外，側邊欄上除前兩個「東南」和「南西」之外的所有鏈接都有有效的工作所需的「href」值 - 您是否也檢查過？ – 2010-11-14 17:29:05

HTML鏈接觸發某些jQuery選項卡

回答

相關問題