innerHTML在Javascript onClick中未更改

Question

I have a default page which has bootstrap tabs . When i click one of the tabs the content loads from the relevant DIV but when i click the other tab it does not replace the other Div .

All code below

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

As i said it goes to the correct file and displays. If i click the 'Help' tab first then the 'Rule' tab it does replace but i think this is because there is a lot more HTML in the 'Rule' file but if i select 'Rule' tab first then the 'Rule' HTML still displays and it should just be a button which launchs a Modal

Answer 1

Prevent the default behavior of the anchor tag

 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

Your code only displays the information when it is clicked but it does not hide the other tab content (or clear the content) when a tab is clicked.

Edit: same as what was mentioned by ADyson in the comment

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

You need to clear the content of the div element which you are not using.

This isn't related to your issue but when you feed the innerHTML() method a string of text containing HTML markup it is converted to a DocumentFragment object representing the new DOM nodes for the HTML elements. You can do this yourself in JavaScript and when you bundle the code into a function you have cleaner and more performant code.

 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

Use this below code: your option tag is blank.. so its not showing.. when you put some value in it.. your code also show this.

  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

Try Jquery.

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