我正在使用 Bootstrap 选项卡和 AJAX 构建一个站点。我已经进行了设置,以便当单击具有类的链接时.load
,该 html 文档的内容会加载到活动选项卡中,在本例中为#tab2
.
这是使用以下方法完成的:
$(function(){
$("#tab2").delegate('.load', 'click', function (e) {
e.preventDefault();
$("#tab2").load($(this).attr("href"));
});
});
我还需要一些链接,那些具有将内容加载到#tab2
的类的链接,我通过以下代码实现了这些链接。 .load-tab1
#tab1
$(function(){
$("#tab2").delegate('.load-tab1', 'click', function (e) {
e.preventDefault();
$("#tab1").load($(this).attr("href"));
});
});
问题是我不知道如何制作它,以便在.load-tab1
单击链接时,活动选项卡也会从 切换#tab2
到#tab1
.
任何帮助将不胜感激!
更新:
我能够使用以下代码使其工作,但仍然认为有更好的解决方案。
$(function(){
$("#tab2").delegate('.load-tab1', 'click', function (e) {
e.preventDefault();
$("#tab1").load($(this).attr("href"));
$(".tab2").removeClass("active");
$(".tab1").addClass("active");
$(".tab-content #tab2").removeClass("active");
$(".tab-content #tab1").addClass("active");
});
});