使用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切换选项卡而不更改布局？

回答

相关问题