使用JavaScript切換選項卡而不更改佈局？

我的網頁是http://sarahjanetrading.com/js/j/index.html 使用JavaScript切換選項卡而不更改佈局？

我已經完成了所有的佈局和編碼。我希望標籤在點擊時切換。我試過谷歌，但徒勞。我願意使用JavaScript或jQuery來達到效果。我的標籤現在是空的，我希望佈局保持不變。

新：

這是到目前爲止我的代碼：

<script type="text/javascript"> 
var lis = $('#main-tabs li'); 
    lis.click(function() { 
    //Reset all the tabs 
    lis.removeClass('active-tab').addClass('inactive-tab'); 
    $(this).addClass('active-tab'); 
    }); 

</script> 

<script type="text/javascript"> 
$(document).ready(function() { 

$(".tab-content").hide(); 
$("ul#main-tabs li a:first").addClass("active").show(); 
$("#wrap > div").hide().filter(":first").show(); 

$("ul.tabs li a").click(function() { 
    $("ul.tabs li > a").removeClass("active"); 
    $(this).addClass("active"); 
    $("#wrap > div").hide(); 
    var activeTab = $(this).attr("href"); 
    $(activeTab).show(); 
    return false; 
    }); 

}); 

</script>

爲完整的HTML和JavaSript代碼（新）請到http://sarahjanetrading.com/js/j/index.html

它的作用是，當我點擊在列表項上，它會更改選項卡，但不會更改內容。當我點擊列表項目的錨點時，它會更改內容，但不會更改標籤。我希望內容和標籤一致地更改。

謝謝

來源

2011-10-04 user967211

jQuery UI可能是最好的解決方案。您可以使用.tabs() 來完成您正在嘗試執行的操作。您還可以使用ThemeRoller輕鬆編輯佈局。

來源

2011-10-04 17:58:29

的事情是，我不是很熟悉jQuery的。如果你能幫助我，我將非常感激。 :) – user967211

您將需要下載jQuery和jQuery UI。 jQuery的：http://docs.jquery.com/Downloading_jQuery jQuery用戶界面：http://jqueryui.com/download 然後按照本教程安裝/配置jQuery UI的。 http://drupal.org/node/1078080 –

jQuery UI是比普通javascript更好的選擇 - 不需要重新發明輪子。如果您按照Farhan在他的回答中提供的標籤鏈接，則有足夠的信息可以幫助您解決問題。 – Michal

這種快速測試是相當不錯的

var lis = $('#main-tabs li'); 
lis.click(function() { 
    //Reset all the tabs 
    lis.removeClass('active-tab').addClass('inactive-tab'); 
    $(this).addClass('active-tab'); 
});

當然它不考慮選項卡的內容，但它是一個開始:)

來源

2011-10-04 18:12:31 Davide

這真是太棒了..現在，當我在標籤上也有內容時，我還需要添加哪些內容？ – user967211

使用JavaScript切換選項卡而不更改佈局？

回答

相關問題