希望大家有一個美好的一天，周末快樂！
我想問一下在我的標簽中添加上一個和下一個按鈕。我已經添加了它，其中包含一些參考此https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow的 JavaScript 。
我知道用輪播參考選項卡有點奇怪，但我認為原理是一樣的。但在我的代碼中，我不知道如何編碼。我很抱歉，因為我對 JavaScript 非常陌生。所以，這是我的嘗試：
//Add & remove class tab, contents, & menu on click
window.addEventListener('DOMContentLoaded', ()=> {
let tabs = document.querySelectorAll('.tab');
let content = document.querySelectorAll('.content');
let prev = document.querySelector('.previous');
let next = document.querySelector('.next');
let firstTab = function(tabs) {tabs.classList.add('tab-active')};
let firstContent = function(content) {content.classList.add('content-active')};
firstTab(tabs[0]);
firstContent(content[0]);
for (let i = 0; i < tabs.length; i ) {
tabs[i].addEventListener('click', () => tabClick(i));
}
prev.addEventListener('click', (i) => tabClick(i - 1));
next.addEventListener('click', (i) => tabClick(i 1));
function tabClick(currentTab) {
removeActive();
//Add Active Class
tabs[currentTab].classList.add('tab-active');
content[currentTab].classList.add('content-active');
}
function removeActive() {
for (let i = 0; i < tabs.length; i ) {
//Remove Active Class
content[i].classList.remove('content-active');
content[i].classList.add('content-show');
setTimeout(function() {
content[i].classList.remove('content-show');
},1500);
tabs[i].classList.remove('tab-active');
}
}
}) /* WHOLE CONTAINER */
.container {
width: 96vw;
height: 96vh;
}
/* TABS */
.tabs {
display: flex;
height: 50px;
overflow: hidden;
align-items: center;
justify-content: center;
width: 100%;
}
.tab {
font-size: 14px;
padding: 5px 10px;
cursor: pointer;
letter-spacing: 2px;
}
#red.tab-active {background-color: rgb(245, 66, 66);}
#blue.tab-active {background-color: rgb(66, 135, 245);}
#yellow.tab-active {background-color: rgb(245, 215, 66);}
#green.tab-active {background-color: rgb(56, 235, 98);}
#cyan.tab-active {background-color: rgb(79, 247, 219);}
/* TAB CONTENTS */
.contents {
width: 100%;
margin-top: 5px;
height: 80%;
}
.content {
width: 96%;
height: 80%;
display: none;
padding: 0;
margin: 0;
border: none;
position: absolute;
}
.content-show {
display: flex;
animation-name: fade-out;
animation-duration: 2.5s;
}
@keyframes fade-out {
0% {
opacity: 1;
display: flex;
}
99% {
opacity: 0;
display: flex;
}
100% {
opacity: 0;
display: none;
}
}
.content-active {
display: flex;
border: none;
justify-content: center;
animation-name: fade-in;
animation-duration: 2.5s;
}
@keyframes fade-in {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0.01;
}
100%{
display: block;
opacity: 1;
}
}
#red.content-active {background-color: rgb(245, 66, 66);}
#blue.content-active {background-color: rgb(66, 135, 245);}
#yellow.content-active {background-color: rgb(245, 215, 66);}
#green.content-active {background-color: rgb(56, 235, 98);}
#cyan.content-active {background-color: rgb(79, 247, 219);}
/* BUTTON PREVIOUS NEXT */
.button {
position: absolute;
top: 49%;
z-index: 4;
}
.previous, .next {
margin: 5px 10px;
letter-spacing: 2px;
background-color: white;
font-size: 14px;
text-align: center;
padding: 5px;
cursor: pointer;
}<div class="container">
<div class="tabs">
<div id="red" class="tab">RED</div>
<div id="blue" class="tab">BLUE</div>
<div id="yellow" class="tab">YELLOW</div>
<div id="green" class="tab">GREEN</div>
<div id="cyan" class="tab">CYAN</div>
</div>
<div class="contents">
<div id="red" class="content"></div>
<div id="blue" class="content"></div>
<div id="yellow" class="content"></div>
<div id="green" class="content"></div>
<div id="cyan" class="content"></div>
</div>
<div class="button">
<div class="previous">PREV</div>
<div class="next">NEXT</div>
</div>
</div>請幫我解決這個代碼家伙。非常感謝。
uj5u.com熱心網友回復：
您面臨的唯一問題是，當您單擊上一個或下一個按鈕時，您在 tabClick 函式中傳遞了引數 i 但 i 不是索引，而是單擊事件的屬性。
這就是你所做的??
prev.addEventListener('click', (i) => tabClick(i - 1));
next.addEventListener('click', (i) => tabClick(i 1));
這里 i 代表 click 的屬性和你點擊的元素，所以它沒有給出索引。
你寧愿做的是：
- 創建一個名為 activeTab 的全域變數并將默認值設定為 0。
- 在 tabClick 函式中將 activeTab 設定為 currentTab 為
activeTab = currentTab - 現在，在 prev 函式里面寫
tabClick(actie - 1) - 下一個功能也一樣。
這是我的代碼??
//Add & remove class tab, contents, & menu on click
window.addEventListener('DOMContentLoaded', ()=> {
let tabs = document.querySelectorAll('.tab');
let content = document.querySelectorAll('.content');
let prev = document.querySelector('.previous');
let next = document.querySelector('.next');
let firstTab = function(tabs) {tabs.classList.add('tab-active')};
let firstContent = function(content) {content.classList.add('content-active')};
let actieTab = 0;
firstTab(tabs[0]);
firstContent(content[0]);
for (let i = 0; i < tabs.length; i ) {
tabs[i].addEventListener('click', () => tabClick(i));
}
prev.addEventListener('click', () => tabClick(activeTab - 1));
next.addEventListener('click', () => tabClick(activeTab 1));
function tabClick(currentTab) {
removeActive();
//Add Active Class
tabs[currentTab].classList.add('tab-active');
content[currentTab].classList.add('content-active');
activeTab = currentTab
}
function removeActive() {
for (let i = 0; i < tabs.length; i ) {
//Remove Active Class
content[i].classList.remove('content-active');
content[i].classList.add('content-show');
setTimeout(function() {
content[i].classList.remove('content-show');
},1500);
tabs[i].classList.remove('tab-active');
}
}
})
uj5u.com熱心網友回復：
對于陣列結束后沒有選擇類的問題，可以這樣做??
- 添加一個代碼來檢查 activeTab 是否在陣列的末尾。
- 如果是，我們將activeTab設定回0并呼叫函式tabClick并將activeTab傳入其中
- 如果不是，否則我們將做與之前相同的事情
- 上一個按鈕也是如此
代碼示例
prev.addEventListener("click", (i) => {
if (activeTab === 0) {
activeTab = tabs.length - 1;
tabClick(activeTab);
} else {
tabClick(activeTab - 1);
}
});
next.addEventListener("click", (i) => {
if (activeTab >= tabs.length - 1) {
activeTab = 0;
tabClick(activeTab);
} else {
tabClick(activeTab 1);
}
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/492754.html
標籤：javascript html css 按钮