Javascript 将文件动态加载到html选项卡内容_Javascript_Jquery_Html_Css

Javascript 将文件动态加载到html选项卡内容

javascript jquery html css

Javascript 将文件动态加载到html选项卡内容,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试从不同的html页面动态加载选项卡内容。当我单击EROs选项卡时，它应该显示/SVB/Tax_EROs.html文件中的内容，而无需重新加载页面。同样，单击“导入”选项卡时，应显示/SVB/Tax\u导入的内容 <ul class="nav nav-tabs"> <li class="active" > <a href="/SVB/Tax_Eros" id="eros">EROs</a> </li&g

我正在尝试从不同的html页面动态加载选项卡内容。当我单击EROs选项卡时，它应该显示/SVB/Tax_EROs.html文件中的内容，而无需重新加载页面。同样，单击“导入”选项卡时，应显示/SVB/Tax\u导入的内容

<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>









$（'#eros'）。单击（函数（）{
$（'#Taxeros'）.load（$（this.attr（'href'））；
});
$（“#导入”）。单击（函数（）{
$（'#Taximports'）.load（$（this.attr（'href'））；
});
$（“#会计”）。单击（函数（）{
$（'#Taxaccounting'）.load（$（this.attr（'href'））；
});


函数单击（）{
var myButtons=document.querySelectorAll（'.eros'）|| null；
如果（myButtons！=null）{
对于（var i=0；ipost或GET->if is'post'页面必须使用Php或其他服务器语言*/
数据=''；
var objElm=document.querySelector（“#”+obj）| | null；
if（objElm==null）{console.log（'no element to write content'）；return；}
xmlRequest（url、类型、数据、obj）
}, !1);
}
}
}
函数xmlRequest（url、类型、数据、obj）{
var xhr=new XMLHttpRequest | | null；
if（chr==null）{console.log（'ocated browser'）；return；}
xhr.addEventListener（'load'，函数（）{
if（this.status==200&&this.readyState==4）{
obj.innerHTML=this.responseText；
}
else{console.log（'Error'）}
}, !1);
xhr.open（类型、url）；
setRequestHeader（'Content-type'，'Application/x-www-form-urlencoded'）；
发送（数据）
}
window.addEventListener（'load'，函数（）{
点击次数（）；
}, !1)


函数单击（）{
var myButtons=document.querySelectorAll（'.eros'）|| null；
如果（myButtons！=null）{
对于（var i=0；ipost或GET->if is'post'页面必须使用Php或其他服务器语言*/
数据=''；
var objElm=document.querySelector（“#”+obj）| | null；
if（objElm==null）{console.log（'no element to write content'）；return；}
xmlRequest（url、类型、数据、obj）
}, !1);
}
}
}
函数xmlRequest（url、类型、数据、obj）{
var xhr=new XMLHttpRequest | | null；
if（chr==null）{console.log（'ocated browser'）；return；}
xhr.addEventListener（'load'，函数（）{
if（this.status==200&&this.readyState==4）{
obj.innerHTML=this.responseText；
}
else{console.log（'Error'）}
}, !1);
xhr.open（类型、url）；
setRequestHeader（'Content-type'，'Application/x-www-form-urlencoded'）；
发送（数据）
}
window.addEventListener（'load'，函数（）{
点击次数（）；
}, !1)

由于您使用的是引导选项卡（3.3.7），因此您需要修改标记，因为引导希望某些约定能够在不配置大量JS的情况下发挥作用

我们没有将需要加载的页面放在

href

属性中，而是将其放在自定义

数据src

属性中。Bootstrap希望

href

属性的值是与选项卡关联的选项卡窗格的ID。我们还添加了引导选项卡工作所需的

data toggle=“tab”

看起来您试图在单击选项卡时加载内容，但这对于默认选项卡和它的选项卡窗格没有用处，因为它最初没有任何内容。因此，我们向jQuery传递了一个函数，该函数将在DOM就绪时执行。此函数将解析选项卡，并根据属性值将内容加载到选项卡窗格中

$（函数（）{
$（'.nav选项卡a'）。每个（功能（索引，el）{
var$this=$（this）；
变量窗格=$this.attr（'href'）；
var src=$this.data（'src'）；
$（窗格）。加载（src）；
});
});








1.
2.
3.
由于您使用的是引导选项卡（3.3.7），因此您需要修改标记，因为引导希望某些约定能够在不配置大量JS的情况下发挥作用
我们没有将需要加载的页面放在href
属性中，而是将其放在自定义数据src
属性中。Bootstrap希望href
属性的值是与选项卡关联的选项卡窗格的ID。我们还添加了引导选项卡工作所需的data toggle=“tab”

看起来您试图在单击选项卡时加载内容，但这对于默认选项卡和
<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>