Question

我正在尝试从不同的html页面动态加载选项卡内容。单击EROs选项卡时，它应显示/SVB/Tax_Eros.html文件中的内容，而不重新加载页面。同样，当单击“导入”选项卡时，它应显示/ 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>

Answer 1

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

Answer 2

由于你使用的是Bootstrap Tabs（3.3.7），你需要修改你的标记，因为Bootstrap期望它可以在没有配置一堆JS的情况下实现它的魔力。

我们不是将您需要加载的页面放在href属性中，而是将其放在自定义data-src属性中。 Bootstrap期望href属性的值是与选项卡关联的选项卡窗格的ID。我们还添加了data-toggle="tab"，因为Bootstrap Tabs需要运行。

您似乎尝试在标签点击上加载内容，但这对于默认标签及其标签窗格并不有用，因为它最初不会是其中的任何内容。所以我们已经将一个函数传递给jQuery，它将在DOM准备就绪时执行。此函数将解析选项卡并根据属性值将内容加载到选项卡窗格中。

＆＃13;

$(function() {

  $('.nav-tabs a').each(function(index, el) {

    var $this = $(this);
    var pane = $this.attr('href');
    var src = $this.data('src');

    $(pane).load(src);

  });

});

＆＃13;

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

＆＃13;

据我所知，Stack Snippets无法模拟Ajax请求，所以这里有JSFiddle和Plunker。

Answer 3

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

动态加载文件到html标签内容

3 个答案: