这是我的代码。如果它处于活动状态,我将如何更改选项卡颜色,然后在它处于非活动状态时将其改回。
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>
我显然需要添加更多细节,所以我是。我正在写填充文本。香蕉、苹果、橙子、番石榴、柠檬都是神奇的水果。我有一个粉红色的仙人掌。我喜欢玫瑰。我喜欢紫罗兰。我喜欢冰淇淋。
答案 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>