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

Question

我的網頁位於http://sarahjanetrading.com/js/j/index.html

我已經完成了所有的布局和編碼。 我希望標簽在單擊時能夠切換。 我嘗試谷歌，但徒勞。 我願意使用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

它的作用是，當我單擊列表項時，它會更改選項卡，但不會更改內容。 當我單擊列表項的錨點時，它將更改內容，但不會更改選項卡。 我希望內容和選項卡都保持一致。

謝謝

Answer 1

jQuery UI可能是最好的解決方案。 您可以使用.tabs（）完成您要執行的操作。 您還可以使用ThemeRoller輕松編輯布局。

Answer 2

這種快速測試效果很好

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

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