活动时更改选项卡颜色

时间：2021-07-18 20:12:30

标签： css colors

这是我的代码。如果它处于活动状态，我将如何更改选项卡颜色，然后在它处于非活动状态时将其改回。

let london_text = document.getElementById('london_text')
let paris_text = document.getElementById('paris_text')
let tokyo_text = document.getElementById('tokyo_text')

let london = document.getElementById('london')
let paris = document.getElementById('paris')
let tokyo = document.getElementById('tokyo')

paris_text.style.display = "none"
tokyo_text.style.display = "none"
london_text.style.display = "block"


london.addEventListener('click', function() {
  paris_text.style.display = "none";
  tokyo_text.style.display = "none";
  london_text.style.display = "block";
});

paris.addEventListener('click', function() {
  paris_text.style.display = "block";
  tokyo_text.style.display = "none";
  london_text.style.display = "none";
});

tokyo.addEventListener('click', function() {
  paris_text.style.display = "none";
  tokyo_text.style.display = "block";
  london_text.style.display = "none";
});
* {
  font-family: 'Zen Loop', cursive;
  font-weight: bold;
}

.city {
  border: none;
  width: 100px;
  height: 60px;
  font-size: 24px;
  outline: none;
  background-color: rgb(231, 231, 231);
}

.city:hover {
  background-color: #ddd;
}

.text {
  border: 1px rgb(211, 211, 211) solid;
  padding: 10px;
  width: 290px;
  height: 150px;
  font-size: 18px;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Zen+Loop&display=swap" rel="stylesheet">
  <title></title>
</head>

<body>
  <button id="london" class="city" id="default">London</button>
  <button id="paris" class="city">Paris</button>
  <button id="tokyo" class="city">Tokyo</button>

  <div id="london_text" class="text">
    <h3>London</h3>
    <p>London is the capital of England</p>
  </div>

  <div id="paris_text" class="text">
    <h3>Paris</h3>
    <p>Paris is the capital of France</p>
  </div>

  <div id="tokyo_text" class="text">
    <h3>Tokyo</h3>
    <p>Tokyo is the capital of Japan</p>
  </div>
</body>

</html>

我显然需要添加更多细节，所以我是。我正在写填充文本。香蕉、苹果、橙子、番石榴、柠檬都是神奇的水果。我有一个粉红色的仙人掌。我喜欢玫瑰。我喜欢紫罗兰。我喜欢冰淇淋。

2 个答案:

答案 0 :(得分：0)

我建议使用 css 解决方案来解决这两个问题，减少您的代码并使其更易于维护，同时重构您的 js 的一部分

const texts = [document.getElementById('london_text'),    
             document.getElementById('paris_text'),
             document.getElementById('tokyo_text')]

const cities = [document.getElementById('london'),
              document.getElementById('paris'),
              document.getElementById('tokyo')]

change(cities[0]);

cities.forEach(city => city.addEventListener('click',
  event => {
    change(city);
  })
);

function change(city) {
  cities.forEach(c => {c.classList.remove("active")});
  city.classList.add("active");
  texts.forEach(t => {t.classList.remove("active")});
  let position = cities.indexOf(city);
  texts[position].classList.add("active");
}
* {
  font-family: 'Zen Loop', cursive;
  font-weight: bold;
}

.city {
  border: none;
  width: 100px;
  height: 60px;
  font-size: 24px;
  outline: none;
  background-color: rgb(231, 231, 231);
}

.city:hover {
  background-color: #ddd;
}

.text {
  border: 1px rgb(211, 211, 211) solid;
  padding: 10px;
  width: 290px;
  height: 150px;
  font-size: 18px;
  display: none;
}

.city.active {
  background-color: aquamarine;
}

.text.active {
  display: block;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Zen+Loop&display=swap" rel="stylesheet">
  <title></title>
</head>

<body>
  <button id="london" class="city">London</button>
  <button id="paris" class="city">Paris</button>
  <button id="tokyo" class="city">Tokyo</button>

  <div id="london_text" class="text">
    <h3>London</h3>
    <p>London is the capital of England</p>
  </div>

  <div id="paris_text" class="text">
    <h3>Paris</h3>
    <p>Paris is the capital of France</p>
  </div>

  <div id="tokyo_text" class="text">
    <h3>Tokyo</h3>
    <p>Tokyo is the capital of Japan</p>
  </div>
</body>

</html>

答案 1 :(得分：0)

由于您为每个按钮创建了独立的函数，因此您可以简单地将类添加到单击的按钮并将其从其他按钮中删除：

let london_text = document.getElementById('london_text')
let paris_text = document.getElementById('paris_text')
let tokyo_text = document.getElementById('tokyo_text')

let london = document.getElementById('london')
let paris = document.getElementById('paris')
let tokyo = document.getElementById('tokyo')

london.addEventListener('click', function(e) {
  paris.classList.remove("active");
  tokyo.classList.remove("active");
  london.classList.add("active");
});

paris.addEventListener('click', function() {
  paris.classList.add("active");
  tokyo.classList.remove("active");
  london.classList.remove("active");
});

tokyo.addEventListener('click', function() {
  paris.classList.remove("active");
  tokyo.classList.add("active");
  london.classList.remove("active");
});
* {
  font-family: 'Zen Loop', cursive;
  font-weight: bold;
}

.city {
  border: none;
  width: 100px;
  height: 60px;
  font-size: 24px;
  outline: none;
  background-color: rgb(231, 231, 231);
}

.city:hover {
  background-color: #ddd;
}

.text {
  border: 1px rgb(211, 211, 211) solid;
  padding: 10px;
  width: 290px;
  height: 150px;
  font-size: 18px;
  display: none; /* added */
}

.city.active:hover {
  background-color: red;
}

.active
{
  background-color: pink;
}

#london.active ~ #london_text,
#paris.active ~ #paris_text,
#tokyo.active ~ #tokyo_text
{
  display: block;
}
<button id="london" class="city active">London</button>
<button id="paris" class="city">Paris</button>
<button id="tokyo" class="city">Tokyo</button>

<div id="london_text" class="text">
  <h3>London</h3>
  <p>London is the capital of England</p>
</div>

<div id="paris_text" class="text">
  <h3>Paris</h3>
  <p>Paris is the capital of France</p>
</div>

<div id="tokyo_text" class="text">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan</p>
</div>

这是一种非常低效的方法。 有一种方法可以在没有任何 javascript 的情况下完成：

* {
  font-family: 'Zen Loop', cursive;
  font-weight: bold;
}

.city {
  border: none;
  width: 100px;
  height: 60px;
  font-size: 24px;
  outline: none;
  background-color: rgb(231, 231, 231);
}

.city:hover {
  background-color: #ddd;
}

.text {
  border: 1px rgb(211, 211, 211) solid;
  padding: 10px;
  width: 290px;
  height: 150px;
  font-size: 18px;
  display: none;
  overflow: hidden;
}

.container
{
  position: relative;
}
input[type="radio"]
{
  display: none;
}

input[type="radio"]:checked ~ .text
{
  display: inline-block;
  position: absolute;
  top: 30px;
  left: 0;
}

input[type="radio"]:checked ~ .city:hover {
  background-color: red;
}

input[type="radio"]:checked ~ .city
{
  background-color: pink;
}
<span class="container">
  <span>
    <input id="london" type="radio" name="menu" checked>
    <label for="london" class="city">London</label>
    <span class="text">
      <h3>London</h3>
      <p>London is the capital of England</p>
    </span>
  </span>
  <span>
    <input id="paris" type="radio" name="menu">
    <label for="paris" class="city">Paris</label>
    <span class="text">
      <h3>Paris</h3>
      <p>Paris is the capital of France</p>
    </span>
  </span>
  <span>
    <input id="tokyo" type="radio" name="menu">
    <label for="tokyo" class="city">Tokyo</label>
    <span class="text">
      <h3>Tokyo</h3>
      <p>Tokyo is the capital of Japan</p>
    </span>
  </span>
</span>

相关问题
最新问题