我想知道为什么它在IE8上不起作用

Question

我想知道为什么它在IE8上不起作用。 在IE9及更高版本中，一切正常。我想知道为什么会这样。 也许我认为这是因为JavaScript使用的代码不支持ie8。

<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>


<div id="Home" class="tabcontent">
  <h3>Home</h3>
  <p>Home is where the heart is..</p>
</div>

<script>
function openPage(pageName,elmnt,color) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].style.backgroundColor = "";
    }
    document.getElementById(pageName).style.display = "block";
    elmnt.style.backgroundColor = color;

}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

----链接：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_full_page_tabs

Answer 1

使用querySelectorAll（＆＃39;。＆＃39;）方法修复了此问题。我认为querySelectorAll（＆＃39; .tablink＆＃39;）和getElementsByClassName（＆＃34; tablink＆＃34;）几乎相同。韩国仍然希望支持IE8或更高版本。

＆＃13;

＆＃13;

function openPage(pageName,elmnt,color) {
    var i, tabcontent, tablinks;
    tabcontent = document.querySelectorAll(".tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.querySelectorAll(".tablink");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].style.backgroundColor = "";
    }
    document.getElementById(pageName).style.display = "block";
    elmnt.style.backgroundColor = color;

}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

＆＃13;

/* Style tab links */
.tablink {
    background-color: #555;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 17px;
    width: 25%;
}

.tablink:hover {
    background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
    color: rgb(0, 0, 0);
    display: none;
    padding: 100px 20px;
    height: 100%;
}

#hacsul {background-color:white;}
#News {background-color:white;}
#Contact {background-color:white;}
#About {background-color:white;}
#t3 {background-color:white;}

＆＃13;

<button class="tablink" onclick="openPage('hacsul', this, 'orange')">hacsul</button>
<button class="tablink" onclick="openPage('News', this, 'orange')" id="defaultOpen">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'orange')">Contact</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">About</button>
<button class="tablink" onclick="openPage('t3', this, 'orange')">t3</button>
<button class="tablink" onclick="openPage('t3', this, 'orange')">t5</button>
<button class="tablink" onclick="openPage('t3', this, 'orange')">t6</button>



<div id="hacsul" class="tabcontent">
  <h3>hacsul</h3>
  <p>hacsul is where the heart is..</p>
</div>

<div id="News" class="tabcontent">
  <h3>News</h3>
  <p>Some news this fine day!</p> 
</div>

<div id="Contact" class="tabcontent">
  <h3>Contact</h3>
  <p>Get in touch, or swing by for a cup of coffee.</p>
</div>

<div id="About" class="tabcontent">
  <h3>About</h3>
  <p>Who we are and what we do.</p>
</div>

<div id="t3" class="tabcontent">
    <h3>t3</h3>
    <p>Who we are and what we do.</p>
  </div>

  <div id="t4" class="tabcontent">
    <h3>About</h3>
    <p>Who we are and what we do.</p>
  </div>

  <div id="t5" class="tabcontent">
    <h3>About</h3>
    <p>Who we are and what we do.</p>
  </div>

  <div id="t6" class="tabcontent">
    <h3>About</h3>
    <p>Who we are and what we do.</p>
  </div>

＆＃13;

＆＃13;

＆＃13;