Javascript 使用 twitter bootstrap 在选项卡中加载新页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12449063/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
loading new page in tabs using twitter bootstrap
提问by vishesh
Hi I am using the following code to create tabbed layout using twitter bootstrap
嗨，我正在使用以下代码使用 twitter bootstrap 创建选项卡式布局
<ul class="nav nav-tabs" >
<li class="active"><a href="#" data-toggle="tab">Request Audit</a></li>
<li><a href="#" data-toggle="tab">status</a></li>
<li><a href="#" data-toggle="tab">Settings</a></li>
<li><a href="#" data-toggle="tab">Help</a></li>
</ul>
now in all tabs i need different page to load.So i want to do this :
现在在所有选项卡中，我需要加载不同的页面。所以我想这样做：
<ul class="nav nav-tabs" >
<li class="active"><a href="#" data-toggle="tab">Home</a></li>
<li><a href="status.html" data-toggle="tab">status</a></li>
<li><a href="settings.html" data-toggle="tab">Settings</a></li>
<li><a href="help.html" data-toggle="tab">Help</a></li>
</ul>
I don't want to load the content from same page in all tabs and above code is not loading new page.Please help..
我不想在所有选项卡中加载来自同一页面的内容，并且上面的代码没有加载新页面。请帮助..
update :
更新 ：
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#audit">Request Audit</a></li>
<li><a href="#status">status</a></li>
<li><a href="#settings">Settings</a></li>
<li><a href="#help">Help</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="audit">
<p>audit</p>
</div>
<div class="tab-pane" id="status">
<p>status</p>
</div>
<div class="tab-pane" id="settings">
<p>settings</p>
</div>
<div class="tab-pane" id="help">
<p>help</p>
</div>
</div>
I have added this script
我已经添加了这个脚本
<script>
$('#myTab a[href="#status"]').click(function (e) {
e.preventDefault();
$(this).tab('show');
$('#status').load('status.html');
});
</script>
回答by crowjonah
There are several ways to do this, but before deciding which one to use, I'd want to make sure you actually want to piece out your files like that. What's keeping you from just putting the content inside of the tabs on the page as it is?
有几种方法可以做到这一点，但在决定使用哪一种之前，我想确保您确实想像这样拼凑出您的文件。是什么阻止您将内容按原样放置在页面上的选项卡内？
If not, why not use PHP?
如果没有，为什么不使用PHP？
If you decide to stick with your current plan, the way I'd accomplish what you're looking to do would be through jQuery and AJAX.
如果您决定坚持当前的计划，那么我将通过 jQuery 和 AJAX 完成您想要做的事情。
First, you want to make sure you're using the proper Bootstrap structure –?check out the Tabbable Navsection, and make your markup tabs correspond to empty content areas:
首先，您要确保使用正确的 Bootstrap 结构——查看Tabbable Nav部分，并使您的标记选项卡对应于空内容区域：
<div class="tabbable" style="margin-bottom: 18px;">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Request Audit</a></li>
<li class=""><a href="#tab2" data-toggle="tab">Status</a></li>
<li class=""><a href="#tab3" data-toggle="tab">Settings</a></li>
<li class=""><a href="#tab4" data-toggle="tab">Help</a></li>
</ul>
<div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
<div class="tab-pane active" id="tab1">
<p>Placeholder 1</p>
</div>
<div class="tab-pane" id="tab2">
<p>Placeholder 2</p>
</div>
<div class="tab-pane" id="tab3">
<p>Placeholder 3</p>
</div>
<div class="tab-pane" id="tab4">
<p>Placeholder</p>
</div>
</div>
</div>?
Then, use jQuery.loadto fill in the tab-panes!
然后，使用jQuery.load填充tab-panes!
$('#tab2').load('/status.html');
$('#tab3').load('/settings.html');
$('#tab4').load('/help.html');
回答by gfan
Just remove the data-toggle="tab"
只需删除data-toggle="tab"
for example: on the Home Page:
例如：在主页上：
<ul class="nav nav-tabs" >
<li class="active"><a href="#" >Home</a></li>
<li><a href="status.html" >status</a></li>
<li><a href="settings.html" >Settings</a></li>
<li><a href="help.html" >Help</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>Home Page content 1</p>
</div>
</div>?
On the status.html page:
在 status.html 页面上：
<ul class="nav nav-tabs" >
<li ><a href="#" >Home</a></li>
<li class="active"><a href="status.html" >status</a></li>
<li><a href="settings.html" >Settings</a></li>
<li><a href="help.html" >Help</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>status content 1</p>
</div>
</div>?
The bad thing is just have some copy of the nav-tab codes
坏事是只有一些导航标签代码的副本
