Question

我有一个默认页面，其中包含bootstrap tabs。当我单击一个选项卡时，内容将从相关的DIV中加载，但是当我单击另一个选项卡tab时，它不会替换其他Div。

下面的所有代码

默认HTML

function load_RbCode() {
  document.getElementById("rbCode").innerHTML = '<object type="text/html" data="functionality.html" style="width: 100%; height: -webkit-fill-available"></object>';
}

function load_HelpModalCode() {
  document.getElementById("helpModalCode").innerHTML = '<object type="text/html" data="help_modal.html" style="width: 100%; height: -webkit-fill-available"></object>';
}

<div>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a id="rbCodeMenu" class="nav-link" href="#" onclick="load_RbCode()">Rule Builder Code</a>
    </li>
    <li class="nav-item">
      <a id="helpModalCodeMenu" class="nav-link" href="#" onclick="load_HelpModalCode()">Help Modal</a>
    </li>
  </ul>
  <div id="rbCode"></div>
  <div id="helpModalCode"></div>
</div>

正如我所说，它会转到正确的文件并显示。如果我先单击“帮助” tab，然后单击“规则” tab，它会替换，但是我认为这是因为“规则”文件中还有很多HTML，但是如果我先选择“规则” tab，然后仍然显示“规则” HTML，它应该只是启动button

的Modal

Answer 1

防止锚标记的默认行为

function load_RbCode(e) {
  e.preventDefault();
  document.getElementById("rbCode").innerHTML = '<object type="text/html" data="functionality.html" style="width: 100%; background:red;height: -100%"></object>';
}

function load_HelpModalCode(e) {
  e.preventDefault();
  document.getElementById("helpModalCode").innerHTML = '<object type="text/html" data="help_modal.html" style="width: 100%;background:green; height: 100%"></object>';
}

<div>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a id="rbCodeMenu" class="nav-link" href="#" onclick="load_RbCode(event)">Rule Builder Code</a>
    </li>
    <li class="nav-item">
      <a id="helpModalCodeMenu" class="nav-link" href="#" onclick="load_HelpModalCode(event)">Help Modal</a>
    </li>
  </ul>
  <div id="rbCode"></div>
  <div id="helpModalCode"></div>
</div>

Answer 2

您的代码仅在单击时显示信息，而在单击选项卡时不会隐藏其他选项卡内容（或清除内容）。

编辑：与ADyson在评论中提到的内容相同

function load_RbCode() {
    //clear the other tab content
    document.getElementById("helpModalCode").innerHTML = "";
    document.getElementById("rbCode").innerHTML='<object type="text/html" data="functionality.html" style="width: 100%; height: -webkit-fill-available"></object>';
}

function load_HelpModalCode() {
    //clear the other tab content
    document.getElementById("rbCode").innerHTML = "";
    document.getElementById("helpModalCode").innerHTML='<object type="text/html" data="help_modal.html" style="width: 100%; height: -webkit-fill-available"></object>';
}

Answer 3

您需要清除未使用的div元素的内容。

这与您的问题无关，但是当您向innerHTML()方法提供包含HTML标记的文本字符串时，它将转换为DocumentFragment对象，该对象代表HTML元素的新DOM节点。您可以使用JavaScript自己完成此操作，将代码捆绑到一个函数中后，您的代码就会更简洁，性能更高。

function addObjectElement (containerElem, contentUrl) {
  // Create a new `object` element 
  var newElement = document.createElement("object");
  // Set the element attributes
  newElement.setAttribute("type", "text/html");
  newElement.style.cssText = "width: 100%; height: -webkit-fill-available";
  newElement.setAttribute("data", contentUrl);
  // Clear the container element if it's populated
  if (containerElem.hasChildNodes())
    containerElem.innerHTML = "";
  // Add the new element to the container
  containerElem.appendChild(newElement);
}

function load_RbCode(event) {
  event.preventDefault();
  // Clear `#helpModalCode`
  document.getElementById("helpModalCode").innerHTML = "";
  // Populate `#rbCode`
  addObjectElement(document.getElementById("rbCode"), "functionality.html");
}

function load_HelpModalCode(event) {
  event.preventDefault();
  // Clear `#rbCode`
  document.getElementById("rbCode").innerHTML = "";
  // Populate `#helpModalCode`
  addObjectElement(document.getElementById("helpModalCode"), "help_modal.html");
}

<div>
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a id="rbCodeMenu" class="nav-link" href ="#" onclick="load_RbCode(event)">Rule Builder Code</a>
    </li>
    <li class="nav-item">
      <a id="helpModalCodeMenu" class="nav-link" href ="#" onclick="load_HelpModalCode(event)">Help Modal</a>
    </li>
  </ul>
  <div id="rbCode"></div>
  <div id="helpModalCode"></div>
</div>

Answer 4

在下面的代码中使用此代码：您的option标记为空白..因此当您在其中添加一些值时它不会显示..您的代码也显示此。

        function load_RbCode() {
            document.getElementById("rbCode").innerHTML='<object type="text/html" data="functionality.html" style="width: 100%; height: -webkit-fill-available;background:red;">one</object>';
        }
    
        function load_HelpModalCode() {
            document.getElementById("helpModalCode").innerHTML='<object type="text/html" data="help_modal.html" style="width: 100%; height: -webkit-fill-available;background:blue;">two</object>';
        }

    <div>
        <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a id="rbCodeMenu" class="nav-link" href ="#" onclick="load_RbCode()">Rule Builder Code</a>
                </li>
                <li class="nav-item">
                    <a id="helpModalCodeMenu" class="nav-link" href ="#" onclick="load_HelpModalCode()">Help Modal</a>
                </li>
        </ul>
        <div id="rbCode">text</div>
        <div id="helpModalCode">tst2</div>
    </div>

Answer 5

尝试Jquery。

添加<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 接着 $('#rbCode').html('<object type="text/html" data="functionality.html" style="width: 100%; height: -webkit-fill-available"></object>');

innerHTML在Javascript onClick中未更改

5 个答案: