将getElementById替换为getELementByClassName/getElementByClass

首先它的getElementsByClassName而不是getElementByClassName，在元素的末尾有一个S。它是复数，因为它返回多个数据。它返回以类名为目标的元素数组。

您必须使用for循环才能使用getElementsByClassName

var classElem = document.getElementsByClassName
for(i=0;i < classElem.length;i++){
    if(classElem[i].innerHTML == "home"){
        classElem[i].style.display = "block"
        classElem[i].style.background = " rgb(235, 197, 191)"
        break;
    }
}

.innerHTML返回标签<div>This text is innerHTML</div> 的内容

它被称为getElementsByClassName，并返回一个必须迭代的HTMLCollection。

所以更换

document.getElementById("id").whatever.foo = bar;

带有

[].forEach.call(document.getElementsByClassName("class"), function(el) {
  el.whatever.foo = bar;
});

首先，getElementById()在具有给定唯一ID的页面上定位单个元素。

getElementsByTagName()和getElementsByClassName()分别返回其标签/类与给定标签/类匹配的元素的阵列。因此，这些并不是简单的可互换。

你为什么不试着把它推广到N标签上呢？使用当前的方法，每次添加新标签时都需要复制代码。

示例：

<!-- These do not need to be paragraphs.  Any element will work as long as it has this class and a unique ID -->
<p class="tab-text" id="home">HOME TEXT!!!</p>
<p class="tab-text" id ="about">ABOUT TEXT!!!</p>
        <h1>Little Shop </h1>
        <ul id="tabs">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
        </ul>
<script>
// Run when document is ready
(function() {
    // Find the UL parent of the tab links
    var tabs = document.getElementById('tabs');
    // Find all links inside it
    var tabLinks = tabs.getElementsByTagName('a');
    // Iterate through them and give them a click event handler
    for (var i = 0; i < tabLinks.length; i++)
    {
        tabLinks[i].onclick = function() {
            // Iterate over all the elements with a class of tab-text and hide them initially
            [].forEach.call(document.getElementsByClassName("tab-text"), function(el) {
              el.style.display = 'none';
            });
            // Then find the element whose ID matches the href attribute of the link clicked and show that
            document.getElementById(this.href.split('#')[1]).style.display = 'block';
            return false;
        }
    }
})();
</script>

如果您想添加一个新的选项卡，唯一需要做的就是创建一个具有"tab text"类和任何id属性的新元素。然后在UL中添加一个新的链接，该链接具有指向ID的href属性。

工作样品：

http://jsfiddle.net/h1cpsudL/

要通过类名获取元素，请使用

...(name){
  document.getElementsByClassName(name);
}

但是它返回一个数组，所以应该对返回的每个元素进行迭代。