Question

我想让我的灯开关（左上角）在点击时更改导航栏的背景颜色，我该怎么做？这是我的代码：

body {
  margin: 0px;
  padding: 0px;
  overflow-y: scroll;
  font-family: Helvetica;
  font-size: 18px;
  background-color: #bdbdbd;
}
.nav {
  background-color: #222;
  position: relative;
  width: 100%;
}
.nav_wrapper {
  width: 960px;
  margin: 0 auto;
  text-align: left;
}
.nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.nav ul li {
  display: inline-block;
  background-color: #222;
  transition: background-color 0.3s ease-in;
  position: relative;
  padding-top: 3px;
  padding-bottom: 3px;
}
.nav ul li img {
  width: 12px;
  height: 10px;
  vertical-align: middle;
  padding-left: 10px;
}
.nav ul li a,
visited {
  display: block;
  padding: 15px;
  text-decoration: none;
  transition: color 0.2s ease-in;
}
.nav ul li a:hover {
  text-decoration: none;
  color: #099;
}
.navhome {
  color: #099;
  border-bottom: 3px solid #099;
}
.navother {
  color: #ccc;
}
.content {
  text-align: center;
  line-height: 130%;
  font-size: 20px;
  display: inline-block;
}
.bdaimg {
  width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  margin-top: 30px;
  transform: scale(1);
  transition-duration: 0.3s;
  border-radius: 15px;
}
.bdaimg:hover {
  transform: scale(1.1);
  transition-duration: 0.3s;
}
.nu {
  font-weight: bold;
  font-size: 25px;
}
h3 {
  font-weight: bold;
  text-decoration: underline;
}
h2 {
  font-weight: bold;
  text-decoration: underline;
}
.bdaimg2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
  margin-top: 30px;
  transform: scale(1);
  transition-duration: 0.3s;
  border-radius: 15px;
}
.bdaimg2:hover {
  transform: scale(1.1);
  transition-duration: 0.3s;
}
/*Light Switch*/

label {
  display: block;
  height: 25px;
  width: 100px;
  background: white;
  text-align: center;
  font: 14px/25px Helvetica, Arial, sans-serif;
  margin: 20px 0;
  position: absolute;
}
label:hover {
  background: #ddca7e;
  color: white;
  cursor: pointer;
}
input#lightswitch {
  position: fixed;
  top: -9999px;
  left: -9999px;
}
input#lightswitch + .content {
  background-color: #bdbdbd;
  transition: background-color 0.5s ease-in;
}
/*Switched Off*/

input#lightswitch:checked + .content {
  background-color: #222;
  transition: background-color 0.5s ease-in;
}
input#lightswitch:checked + .content {
  color: white;
  transition: color 0.5s ease-in;
}
input#lightswitch:checked + .content {
  color: white;
  transition: color 0.5s ease-in;
}

<!DOCTYPE html>

<head>
  <title>Beijing Dance Academy</title>
  <link rel="stylesheet" type="text/css" href="bda.css">
</head>

<body>
  <div class="nav">
    <div class="nav_wrapper">
      <ul>
        <li><a class="navother" href="Home.html">Home</a>
        </li>
        <li><a class="navother" href="CR.html">Cultural Revolution</a>
        </li>
        <li><a class="navhome" href="BDA.html">Beijing Dance Academy</a>
        </li>
        <li><a class="navother" href="CNY.html">Chinese New Year</a>
        </li>
      </ul>
    </div>
  </div>
  <label for="lightswitch">Light Switch</label>
  <input type="checkbox" id="lightswitch" />
  <div class="content">
    <img src="bda.png" alt="BDA" class="bdaimg">
    <p>
      <h2>Beijing Dance Academy</h2>
      Beijing Dance Academy, or BDA, was the first professional dance school founded in China, in 1954. The academy was helped by Soviet Russia in building the academy and the techniques they used to learn dance. Although Russia helped with the Beijing Dance
      Academy, China's repressive Communist government forbidded Russian presence in the school. The Beijing Dance Academy soon opened back up to all people from around the world when, in 1976, China's Communist leader, Mao Zedong, died.
      <br>
      <br>Several times a year, Beijing Dance Academy holds auditions to be accepted into the school, for more disadvantaged areas officals come around small towns and schools and pick out children of age, the academy initially only accepted students from
      ages 11 to 18 but eventually the age range expanded. They then test the student's basic body abilities. More than 2,000 children audition to be accepted into the academy but only 1 in every 20 make the cut. Majority of the children in the academy
      are Chinese but the academy has an additional program that allows international students to apply.
      <br>
      <br>
      <h3>
    A Day in the Life of a Student
  </h3>
      A day of a Beijing Dance Academy student starts with basic warm-ups and stretches such as flexibility exercises and drills for turns and jumps. After breakfast, the students have a ballet technique class followed by character dance or pas de deux exercises.
      Then after lunch, the students study normal subjects such as mathematics or Chinese for 3 hours. In the afternoon, they have repertory classes or study or do homework. The Beijing Dance Academy is run for the whole week...
    </p>
    <p class="nu">
      INCLUDING SATURDAY AND SUNDAY!
      <img src="sadface.png" alt="SpongebobSadFace" class="bdaimg2">
    </p>
  </div>
</body>

Answer 1

以下是使用return 0：

处理此问题的方法

for

最佳

Answer 2

你可以通过纯粹的javascript轻松完成。

document.querySelector('#lightswitch').addEventListener('click', function () {
    document.querySelector('nav').style["background-color"] = "Green Color Code";
});

Answer 3

是的，你可以在没有javascript的情况下实现它。您必须在代码中进行三处更改 1.将.nav放在<label for="lightswitch">Light Switch</label> <input type="checkbox" id="lightswitch" /> <div class="nav"> <div class="nav_wrapper"> <ul> <li><a class="navother" href="Home.html">Home</a> </li> <li><a class="navother" href="CR.html">Cultural Revolution</a> </li> <li><a class="navhome" href="BDA.html">Beijing Dance Academy</a> </li> <li><a class="navother" href="CNY.html">Chinese New Year</a> </li> </ul> </div> </div> <div class="content"> <img src="bda.png" alt="BDA" class="bdaimg"> <p> <h2>Beijing Dance Academy</h2> Beijing Dance Academy, or BDA, was the first professional dance school founded in China, in 1954. The academy was helped by Soviet Russia in building the academy and the techniques they used to learn dance. Although Russia helped with the Beijing Dance Academy, China's repressive Communist government forbidded Russian presence in the school. The Beijing Dance Academy soon opened back up to all people from around the world when, in 1976, China's Communist leader, Mao Zedong, died. <br> <br>Several times a year, Beijing Dance Academy holds auditions to be accepted into the school, for more disadvantaged areas officals come around small towns and schools and pick out children of age, the academy initially only accepted students from ages 11 to 18 but eventually the age range expanded. They then test the student's basic body abilities. More than 2,000 children audition to be accepted into the academy but only 1 in every 20 make the cut. Majority of the children in the academy are Chinese but the academy has an additional program that allows international students to apply. <br> <br> <h3> A Day in the Life of a Student </h3> A day of a Beijing Dance Academy student starts with basic warm-ups and stretches such as flexibility exercises and drills for turns and jumps. After breakfast, the students have a ballet technique class followed by character dance or pas de deux exercises. Then after lunch, the students study normal subjects such as mathematics or Chinese for 3 hours. In the afternoon, they have repertory classes or study or do homework. The Beijing Dance Academy is run for the whole week... </p> <p class="nu"> INCLUDING SATURDAY AND SUNDAY! <img src="sadface.png" alt="SpongebobSadFace" class="bdaimg2"> </p> </div>容器

之前

top

在label
下面为.nav label { display: block; height: 25px; width: 100px; background: white; text-align: center; font: 14px/25px Helvetica, Arial, sans-serif; margin: 20px 0; position: absolute; top:50px; }添加css
```
input#lightswitch ~ .content
```
为input#lightswitch ~ .nav
添加类似input#lightswitch ~ .content { background-color: #bdbdbd; transition: background-color 0.5s ease-in; } /*Switched Off*/ input#lightswitch:checked ~ .content { background-color: #222; transition: background-color 0.5s ease-in; } input#lightswitch:checked ~ .nav{ background-color: #eee; transition: background-color 0.5s ease-in; } input#lightswitch:checked ~ .nav ul li { background-color: #eee; transition: background-color 0.5s ease-in; } input#lightswitch:checked ~ .nav ul li a.navother { color: #111; transition: color 0.5s ease-in; } input#lightswitch:checked ~ .content { color: white; transition: color 0.5s ease-in; } input#lightswitch:checked ~ .content { color: white; transition: color 0.5s ease-in; }的css
```
{{1}}
```

你可以在这里看到工作小提琴

See woking fiddle

如何使按钮影响另一个元素

3 个答案: