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

当然它不考虑标签的内容，但它是一个开始：）

使用JavaScript切换选项卡而不更改布局？

2 个答案: