在导航栏中显示基于活动链接的内容

Question

我使用CSS和javascript创建了三个活动链接。我有三个图像形式的数据集，我想根据哪个链接是活动的来显示。这些图像将以滑动幻灯片的形式出现在链接下方。我该怎么做呢?我的参考资料是new balance网站上的活动幻灯片

.active-link {
position: relative;
display: flex;
top: 12rem;
/*position for active link */
justify-content: center;
}
.button {
padding: 0 40px 10px 40px;
cursor: pointer;
display: inline-block;
font-weight: 500;
border-bottom: 2px solid black;
}
.button:active,
.active {
color: red;
border-bottom: 5px solid red;
padding-bottom: 7px;
}
.slide-container {
position: relative;
// I'm not sure what you're looking for visually so I just used a top position greater than what you're already using on the buttons.
top: 14rem;
display: none;
}
.slide-container.active {
display: block;
}

<div class="active-link" id="active-link">
<li>
<a class="button">Him</a>
</li>
<li>
<a class="button active">2</a>
</li>
<li>
<a class="button">Her</a>
</li>
</div>
<div class="slide-containers">
<div id="slide-container-1" class="slide-container">
Slide Container 1
</div>
<div id="slide-container-2" class="slide-container">
Slide Container 2
</div>
<div id="slide-container-3" class="slide-container">
Slide Container 3
</div>
</div>

<script>
var btnContainer = document.getElementById("active-link");
var btns = btnContainer.getElementsByClassName("button");
function removeClass(elems, className) {
[].forEach.call(document.querySelectorAll(elems), function(el) {
el.classList.remove(className);
});
}
const resetSlideContainers = () => {
[...document.querySelectorAll('.slide-container')].forEach((slide) =>
slide.classList.remove('active'));
}
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function(e) {
removeClass('.button', 'active')
this.classList.toggle('active');
resetSlideContainers();
document.getElementById(this.getAttribute('data-slide')).classList.add('active');
})
}
</script>

我使用CSS和javascript创建了三个活动链接。我有三个图像形式的数据集，我想根据哪个链接是活动的来显示。这些图像将以滑动幻灯片的形式出现在链接下方。我该怎么做呢?我的参考资料是new balance网站上的活动幻灯片

var btnContainer = document.getElementById("active-link");
var btns = btnContainer.getElementsByClassName("button");
function removeClass(elems, className) {
[].forEach.call(document.querySelectorAll(elems), function(el) {
el.classList.remove(className);
});
}
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function(e) {
removeClass('.button', 'active')
this.classList.toggle('active');
})
}

.active-link {
position: relative;
display: flex;
top: 12rem;
justify-content: center;
}
.button {
padding: 0 40px 10px 40px;
cursor: pointer;
display: inline-block;
font-weight: 500;
border-bottom: 2px solid black;
}
.button:active,
.active {
color: red;
border-bottom: 5px solid blue;
padding-bottom: 7px;
}

<div class="active-link" id="active-link">
<li>
<a class="button">1</a>
</li>
<li>
<a class="button active">2</a>
</li>
<li>
<a class="button">3</a>
</li>
</div>

Answer 1

我将创建一个容器来保存每个幻灯片的内容，并使用data属性将按钮链接到幻灯片。单击按钮后，可以删除前一张幻灯片的活动类，并为当前幻灯片添加一个新类。以下是我在底部添加的相关代码。

<div class="active-link" id="active-link">
<li>
<a class="button" data-slide="slide-container-1">1</a>
</li>
<li>
<a class="button active" data-slide="slide-container-2">2</a>
</li>
<li>
<a class="button" data-slide="slide-container-3">3</a>
</li>
</div>
<div class="slide-containers">
<div id="slide-container-1" class="slide-container">
Slide Container 1
</div>
<div id="slide-container-2" class="slide-container">
Slide Container 2
</div>
<div id="slide-container-3" class="slide-container">
Slide Container 3
</div>
</div>

.slide-container {
position: relative;
// I'm not sure what you're looking for visually so I just used a top position greater than what you're already using on the buttons.
top: 14rem;
display: none;
}
.slide-container.active {
display: block;
}

const resetSlideContainers = () => {
[ ...document.querySelectorAll('.slide-container') ].forEach((slide) => slide.classList.remove('active'));
}
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function(e) {
removeClass('.button', 'active')
this.classList.toggle('active');
resetSlideContainers();
document.getElementById(this.getAttribute('data-slide')).classList.add('active');
})
}

下面是一个工作示例。