Question

目前我正在使用CSS，HTML和Javascript来为网站创建功能选项卡，我正在使用getElementById来调用特定的ID。但是，现在，我想在单个选项卡下添加多个项目，包括图像，更多文本，标题等。如何使用getElementByClassName或getElementByClass（我应该使用哪些？）将所有多个项目组合成一个类并将其放入Javascript中？

我想将id更改为类并添加多个元素（我知道如何）：

<body>

    <p id="home">HOME TEXT!!!</p>

    /*Like:

    <div class="home">

         <h3>HOME TITLE!</h3>
         <img src="example.jpg">
         <p>Welcome to the home page!</p>

     </div>  

     */


    <p id ="about">ABOUT TEXT!!!</p>

    <script>

我不知道如何更改此部分（getElementById）来处理类：

        function HomeTabFunction() {
            document.getElementById("home").style.display="block" 
            document.getElementById("homeTab").style.background = rgb(235, 197, 191)
            document.getElementById("about").style.display="none"
            document.getElementById("aboutTab").style.background = "lightblue"

        }

        function AboutTabFunction() {

            document.getElementById("about").style.display="block"
            document.getElementById("aboutTab").style.background = "blue"
            document.getElementById("home").style.display="none" 
            document.getElementById("homeTab").style.background = "lightblue"
        }

    </script>

    <h1>Little Shop </h1>
    <ul id="tabs">
        <li><a id="homeTab" href="javascript:void;" onclick="HomeTabFunction()">Home</a></li>
        <li><a id="aboutTab" href="javascript:void;" onclick="AboutTabFunction()">About</a></li>

</body>

Answer 1

它被称为getElementsByClassName并返回HTMLCollection，你必须迭代它。

所以替换

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

与

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

Answer 2

要按类名获取元素，请使用

...(name){

  document.getElementsByClassName(name);

}

但它返回一个数组，所以你应该遍历返回的每个元素。

Answer 3

首先，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>

的内容

Answer 4

首先，KryoConfigurator在具有唯一 ID的网页上找到单个元素。

另一方面，

getElementById()和getElementsByTagName()返回一个元素数组，其标记/类分别与给定的标记/类匹配。因此，这些不是简单的可互换的。

为什么不尝试概括这一点，以便适用于N-tabs？使用您当前的方法，每次添加新选项卡时都需要复制代码。

示例：

getElementsByClassName()

如果要添加新选项卡，唯一需要做的就是创建一个带有“tab-text”类和任何id属性的新元素。然后在UL中添加一个新链接，其中包含指向ID的href属性。

工作样本：

http://jsfiddle.net/h1cpsudL/

Answer 5

创建一些CSS样式。

如果您想使用javascript为元素添加样式，请尝试以下操作：

var el = document.getElementById('theID');
el.className += 'newClassNameToAdd';

使用JQuery ......

$('#theID').addClass('newClassNameToAdd');

现在，如果你有一个HTMLCollection（多个元素），使用标签或类选择器：

var els = document.getElementsByTagName('tagName');
var len = els.length;

for (var i = 0; i < len; i++) {
    els[i].className += 'newClassNameToAdd';
}

使用JQuery ......

$('tagName').addClass('newClassNameToAdd');

用getELementByClassName / getElementByClass替换getElementById？

5 个答案: