动态将文件加载到html标签内容
[英]dynamically load file to html tab content
问题描述
I am trying to load the tab contents dynamically from different html page. 
我试图从不同的html页面动态加载选项卡内容。 When I click EROs tab it should display the contents from /SVB/Tax_Eros.html file without reloading the page. 当我单击EROs选项卡时，它应该显示/SVB/Tax_Eros.html文件中的内容，而无需重新加载页面。 Likewise when Import tab is clicked it should display the contents from /SVB/Tax_Imports 同样，当单击“导入”选项卡时，它应显示/ SVB / Tax_Imports中的内容
<ul class="nav nav-tabs">
<li class="active" >
<a href="/SVB/Tax_Eros" id="eros">EROs</a>
</li>
<li>
<a href="/SVB/Tax_Imports" id="imports">Imports</a>
</li>
<li>
<a href="/SVB/Tax_Accounting" id="accounting">Accounting</a>
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="eros">
<script>
$('#eros').click(function(){
$('#Taxeros').load($(this).attr('href'));
});
</script>
</div>
<div class="tab-pane" id="imports">
<script>
$('#imports').click(function(){
$('#Taximports').load($(this).attr('href'));
});
</script>
</div>
<div class="tab-pane" id="accounting">
<script>
$('#accounting').click(function(){
$('#Taxaccounting').load($(this).attr('href'));
});
</script>
</div>
</div>
3 个解决方案
解决方案1
1 已采纳 2018-01-04 22:51:45
Since you are using Bootstrap Tabs (3.3.7) you will need to modify your markup as Bootstrap expects certain conventions for it to do its magic without configuring a bunch of JS. 由于您使用的是Bootstrap选项卡（3.3.7），因此您将需要修改标记，因为Bootstrap期望某些约定可以使其发挥作用而无需配置大量JS。
Instead of placing the page you need to load in the href attribute we place it in a custom data-src attribute. 无需放置页面，您需要将其放置在href属性中，而将其放置在自定义data-src属性中。 Bootstrap expects the value of the href attribute to be the ID of the tab pane associated with the tab. Bootstrap期望href属性的值是与选项卡关联的选项卡窗格的ID。 We also added data-toggle="tab" as that is required for Bootstrap Tabs to function. 我们还添加了data-toggle="tab" ，这是引导选项卡运行所必需的。
It looked like you were trying to load content on tab click but that isn't useful for the default tab and it's tab pane as there won't be any content in it initially. 似乎您正在尝试在选项卡单击上加载内容，但这对默认选项卡没有用，它是选项卡窗格，因为开始时其中没有任何内容。 So we've passed a function to jQuery that will get executed when the DOM is ready. 因此，我们已经向jQuery传递了一个函数，该函数将在DOM准备就绪时执行。 This function will parse the tabs and load content into the tab panes based on the attribute values. 此功能将解析选项卡，并根据属性值将内容加载到选项卡窗格中。
$(function() { $('.nav-tabs a').each(function(index, el) { var $this = $(this); var pane = $this.attr('href'); var src = $this.data('src'); $(pane).load(src); }); });
<ul class="nav nav-tabs"> <li class="active"> <a data-src="/SVB/Tax_Eros" href="#eros" data-toggle="tab">EROs</a> </li> <li> <a data-src="/SVB/Tax_Imports" href="#imports" data-toggle="tab">Imports</a> </li> <li> <a data-src="/SVB/Tax_Accounting" href="#accounting" data-toggle="tab">Accounting</a> </li> </ul> <div class="tab-content clear-fix"> <div class="tab-pane active" id="eros">1</div> <div class="tab-pane" id="imports">2</div> <div class="tab-pane" id="accounting">3</div> </div>
As far as I know, Stack Snippets cannot mock Ajax requests so here's a JSFiddle and a Plunker that do. 据我所知，Stack Snippets无法模拟Ajax请求，因此这是一个JSFiddle和Plunker 。
解决方案2
0 2018-01-04 22:07:10
<html>
<head>
<script type='text/javascript'>
function clicks () {
var myButtons = document.querySelectorAll('.eros') || null;
if (myButtons != null){
for (var i = 0; i < myButtons.length; i++){
myButtons[i].addEventListener('click', function () {
var url = this.getAttribute('data-href'); // location to load
var obj = this.getAttribute('data-id');//id to append content
var type = 'GET'; /*-> post or get-> if is 'post' page must be in Php or other server language*/
data = '';
var objElm = document.querySelector('#'+obj) || null;
if (objElm === null){console.log('no element to write content'); return;}
xmlRequest (url, type, data, obj)
}, !1);
}
}
}
function xmlRequest (url, type, data, obj){
var xhr = new XMLHttpRequest || null;
if (chr === null){console.log('Obsolete browser');return;}
xhr.addEventListener('load', function () {
if (this.status == 200 && this.readyState == 4){
obj.innerHTML = this.responseText;
}
else {console.log('Error')}
}, !1);
xhr.open(type, url);
xhr.setRequestHeader('Content-type', 'Application/x-www-form-urlencoded');
xhr.send(data)
}
</script>
<script type='text/javascript'>
window.addEventListener('load', function () {
clicks ();
}, !1)
</script>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active" >
<a data-href="/SVB/Tax_Eros" data-toggle="tab" data-id="eros" class="eros">EROs</a>
</li>
<li>
<a data-href="/SVB/Tax_Imports" data-toggle="tab" data-id="imports" class="eros">Imports</a>
</li>
<li>
<a data-href="/SVB/Tax_Accounting" data-toggle="tab" data-id="accounting" class="eros">Accounting</a>
</li>
</ul>
<div class="tab-content clear-fix">
<div class="tab-pane active" id="eros"> </div>
<div class="tab-pane" id="imports"></div>
<div class="tab-pane" id="accounting"></div>
</div>
</body>
解决方案3
0 2019-08-28 09:44:22
$(function() { $('.nav-tabs a').each(function(index, el) { var $this = $(this); var pane = $this.attr('href'); var src = $this.data('src'); $(pane).load(src); }); });
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <ul class="nav nav-tabs"> <li class="active"> <a data-src="/SVB/Tax_Eros" href="#eros" data-toggle="tab">EROs</a> </li> <li> <a data-src="/SVB/Tax_Imports" href="#imports" data-toggle="tab">Imports</a> </li> <li> <a data-src="/SVB/Tax_Accounting" href="#accounting" data-toggle="tab">Accounting</a> </li> </ul> <div class="tab-content clear-fix"> <div class="tab-pane active" id="eros">1</div> <div class="tab-pane" id="imports">2</div> <div class="tab-pane" id="accounting">3</div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.