Question

我有这个Javascript可以在单击时更改背景颜色，但是在页面加载时已经设置了背景颜色。我该如何解决？我看不到如何在页面加载时隐藏“活动”类，而仅在单击按钮时显示该类。代码中的其他所有内容都运行正常。我一直在寻找答案。

var newItemCounter = 1;
var ourList = document.getElementById("our-list");
var ourButton = document.getElementById("our-button");
var ourHeadline = document.getElementById("our-headline");
var listItems = document.getElementById("our-list").getElementsByTagName("li");


ourList.addEventListener("click", activateItem);


function activateItem(e) {
    if (e.target.nodeName == "LI") {
        ourHeadline.innerHTML = e.target.innerHTML;
        for (i = 0; i < e.target.parentNode.children.length; i++) {
            e.target.parentNode.children[i].classList.remove("active");
        }
        e.target.classList.add("active");
    }
}

ourButton.addEventListener("click", createNewItem);


function createNewItem() {
    ourList.innerHTML += "<li>New item " + newItemCounter + "</li>";
    newItemCounter++;
}

li {
    width: 200px;
    padding: 5px;
    border-bottom: 1px solid grey;
    background-color: #FFFFFF;
}

.active {
    background-color: #FFFF02;
}

<h1 id="our-headline">Click an item to replace this text.</h1>

<button id="our-button">Add New Item</button>

<ul id="our-list">
  <li class="active">First item</li> 
  <li class="active">Second item</li> 
  <li class="active">Third item</li> 
  <li class="active">Fourth item</li> 
  <li class="active">Fifth item</li> 
  <li class="active">Sixth item</li> 
</ul>

Answer 1

您可以从默认的active项目中删除li类。

var newItemCounter = 1;
var ourList = document.getElementById("our-list");
var ourButton = document.getElementById("our-button");
var ourHeadline = document.getElementById("our-headline");
var listItems = document.getElementById("our-list").getElementsByTagName("li");


ourList.addEventListener("click", activateItem);


function activateItem(e) {
    if (e.target.nodeName == "LI") {
        ourHeadline.innerHTML = e.target.innerHTML;
        for (i = 0; i < e.target.parentNode.children.length; i++) {
            e.target.parentNode.children[i].classList.remove("active");
        }
        e.target.classList.add("active");
    }
}

ourButton.addEventListener("click", createNewItem);


function createNewItem() {
    ourList.innerHTML += "<li>New item " + newItemCounter + "</li>";
    newItemCounter++;
}

li {
    width: 200px;
    padding: 5px;
    border-bottom: 1px solid grey;
    background-color: #FFFFFF;
}

.active {
    background-color: #FFFF02;
}

<!DOCTYPE html>
<html lang="en"> 
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Javascript Example</title>
  </head>
  <body>

  <h1 id="our-headline">Click an item to replace this text.</h1>

  <button id="our-button">Add New Item</button>

  <ul id="our-list">
    <li>First item</li> 
    <li>Second item</li> 
    <li>Third item</li> 
    <li>Fourth item</li> 
    <li>Fifth item</li> 
    <li>Sixth item</li> 
  </ul>

  <script type="text/javascript" src="script.js"></script>
  </body>
</html>

Answer 2

只需从标记中删除该类，然后让Javascript处理添加该类。

var newItemCounter = 1;
var ourList = document.getElementById("our-list");
var ourButton = document.getElementById("our-button");
var ourHeadline = document.getElementById("our-headline");
var listItems = document.getElementById("our-list").getElementsByTagName("li");


ourList.addEventListener("click", activateItem);


function activateItem(e) {
    if (e.target.nodeName == "LI") {
        ourHeadline.innerHTML = e.target.innerHTML;
        for (i = 0; i < e.target.parentNode.children.length; i++) {
            e.target.parentNode.children[i].classList.remove("active");
        }
        e.target.classList.add("active");
    }
}

ourButton.addEventListener("click", createNewItem);


function createNewItem() {
    ourList.innerHTML += "<li>New item " + newItemCounter + "</li>";
    newItemCounter++;
}

li {
    width: 200px;
    padding: 5px;
    border-bottom: 1px solid grey;
    background-color: #FFFFFF;
}

.active {
    background-color: #FFFF02;
}

<!DOCTYPE html>
<html lang="en"> 
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Javascript Example</title>
  </head>
  <body>

  <h1 id="our-headline">Click an item to replace this text.</h1>

  <button id="our-button">Add New Item</button>

  <ul id="our-list">
    <li >First item</li> 
    <li >Second item</li> 
    <li >Third item</li> 
    <li >Fourth item</li> 
    <li >Fifth item</li> 
    <li >Sixth item</li> 
  </ul>

  <script type="text/javascript" src="script.js"></script>
  </body>
</html>

如何在CSS中设置默认颜色？

2 个答案: