【问题标题】：Match A Click Event On A Target Element To A Separate Element将目标元素上的点击事件匹配到单独的元素
【发布时间】：2020-05-04 17:30:29
【问题描述】：
我希望能够通过单击事件将选项卡链接与选项卡窗格链接。
我有在每个选项卡链接上放置/删除活动类的代码，但我正在努力将其与相关的选项卡窗格匹配。
我会通过e.target 事件执行此操作并通过匹配数组位置来执行此操作吗？还是使用选项卡链接的href 属性并将其与选项卡窗格的#id 匹配？
var tabLink = document.querySelectorAll(".tab-link"),
tabPane = document.querySelectorAll(".tab-pane")
tabLink.forEach(function (item) {
item.addEventListener('click', function (e) {
// ADDS AND REMOVES ACTIVE CLASS ON TABLINKS
tabLink.forEach(function (item) {
item.classList.remove("active")
})
item.classList.add("active")
// SOMEHOW EQUATE TAB LINKS TO TAB PANES
console.log(e.target)
},false)
})
.nav-tabs {
display: flex;
align-items: center;
padding: 1rem 2rem;
list-style: none;
background: lightblue;
}
.tab-link {
margin-left: 4rem;
padding: 1rem;
border-radius: 1px;
transition: 0.2s;
display: block;
}
/*changes background of active tab link*/
.tab-link.active {
background: white;
}
/*hides tab panes*/
.tab-pane {
display: none;
}
/*shows active pane*/
.tab-pane.active {
display: block;
}
<div class="tabs-wrapper">
<ul class="nav-tabs" role="tablist">
<li role="presentation"><a class="tab-link active" href="#html-tab" title="html tab" role="tab">FIRST</a></li>
<li role="presentation"><a class="tab-link" href="#css-tab" title="css tab" role="tab">SECOND</a></li>
<li role="presentation"><a class="tab-link" href="#result-tab" title="result tab" role="tab">THIRD</a></li>
</ul>
<!-- tab panel containing tab panes -->
<div class="tab-panel">
<div class="tab-pane active" id="html-tab" role="tabpanel">
FIRST CONTENT
</div>
<div class="tab-pane" id="css-tab" role="tabpanel">
SECOND CONTENT
</div>
<div class="tab-pane" id="result-tab" role="tabpanel">
THIRD CONTENT
</div>
</div>
</div>
【问题讨论】：
标签：
javascript
html
css
this
dom-events
【解决方案1】：
你需要使用 getAttribute() 函数
我为你做了一个 jsfiddle：https://jsfiddle.net/fgu1ycjo/3/
<div class="tabs-wrapper">
<ul class="nav-tabs" role="tablist">
<li role="presentation"><a class="tab-link active" target="html-tab" title="html tab" role="tab">FIRST</a></li>
<li role="presentation"><a class="tab-link" target="css-tab" title="css tab" role="tab">SECOND</a></li>
<li role="presentation"><a class="tab-link" target="result-tab" title="result tab" role="tab">THIRD</a></li>
</ul>
<!-- tab panel containing tab panes -->
<div class="tab-panel">
<div class="tab-pane active" id="html-tab" role="tabpanel">
FIRST CONTENT
</div>
<div class="tab-pane" id="css-tab" role="tabpanel">
SECOND CONTENT
</div>
<div class="tab-pane" id="result-tab" role="tabpanel">
THIRD CONTENT
</div>
</div>
</div>
var tabLink = document.querySelectorAll(".tab-link"),
tabPane = document.querySelectorAll(".tab-pane")
tabLink.forEach(function (item) {
item.addEventListener('click', function (e) {
// ADDS AND REMOVES ACTIVE CLASS ON TABLINKS
tabLink.forEach(function (item) {
item.classList.remove("active")
});
item.classList.add("active");
// SOMEHOW EQUATE TAB LINKS TO TAB PANES
let target = e.target.getAttribute('target')
let activPanel = document.querySelectorAll(".tab-pane.active");
// hide actives tabs
activPanel.forEach(function (item) {
item.classList.remove('active');
});
// show target tab
document.getElementById(target).classList.add('active');
},false)
})
【解决方案2】：
我用这个link from w3schools 想出了一个答案。关键是为标签本身分配某种类型的属性，让它知道目标内容是什么。然后，您可以管理选项卡窗格的显示以反映这一点。
var tabLink = document.querySelectorAll(".tab-link"),
tabPane = document.querySelectorAll(".tab-pane")
tabLink.forEach(function (item) {
item.addEventListener('click', function (e) {
// ADDS AND REMOVES ACTIVE CLASS ON TABLINKS
tabLink.forEach(function (item) {
item.classList.remove("active")
})
item.classList.add("active")
// REMOVES DISPLAY OF CONTENT AREAS
tabPane.forEach(function (tab){
tab.style.display = "none";
})
// SOMEHOW EQUATE TAB LINKS TO TAB PANES
var targetPanel = item.getAttribute("content-panel");
document.getElementById(targetPanel).style.display = "block";
},false)
})
.nav-tabs {
display: flex;
align-items: center;
padding: 1rem 2rem;
list-style: none;
background: lightblue;
}
.tab-link {
margin-left: 4rem;
padding: 1rem;
border-radius: 1px;
transition: 0.2s;
display: block;
}
/*changes background of active tab link*/
.tab-link.active {
background: white;
}
/*hides tab panes*/
.tab-pane {
display: none;
}
/*shows active pane*/
.tab-pane.active {
display: block;
}
<div class="tabs-wrapper">
<ul class="nav-tabs" role="tablist">
<li role="presentation"><a class="tab-link active" href="#html-tab" title="html tab" role="tab" content-panel="html-tab">FIRST</a></li>
<li role="presentation"><a class="tab-link" href="#css-tab" title="css tab" role="tab" content-panel="css-tab">SECOND</a></li>
<li role="presentation"><a class="tab-link" href="#result-tab" title="result tab" role="tab" content-panel="result-tab">THIRD</a></li>
</ul>
<!-- tab panel containing tab panes -->
<div class="tab-panel">
<div class="tab-pane active" id="html-tab" role="tabpanel">
FIRST CONTENT
</div>
<div class="tab-pane" id="css-tab" role="tabpanel">
SECOND CONTENT
</div>
<div class="tab-pane" id="result-tab" role="tabpanel">
THIRD CONTENT
</div>
</div>
</div>
【解决方案3】：
试试这个！
我添加了一个很酷的淡入淡出效果
function showpane(evt, pane) {
// Declare all variables
var i, tabpane, tablinks;
// Get all elements with class="tab-pane" and hide them
tabpanes = document.getElementsByClassName("tab-pane");
for (i = 0; i < tabpanes.length; i++) {
tabpanes[i].style.display = "none";
}
// Get all elements with class="tab-link" and remove the class "active"
tablinks = document.getElementsByClassName("tab-link");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].classList.remove("active");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(pane).style.display = "block";
evt.currentTarget.className += " active";
}
.nav-tabs {
display: flex;
align-items: center;
padding: 1rem 2rem;
list-style: none;
background: lightblue;
}
.tab-link {
margin-left: 4rem;
padding: 1rem;
border-radius: 1px;
transition: 0.2s;
display: block;
}
/*changes background of active tab link*/
.tab-link.active {
background: white;
}
/*hides tab panes*/
.tab-pane {
display: none;
}
/*shows active pane*/
.tab-pane.active {
display: block;
}
.tab-pane {
animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
/* Go from zero to full opacity */
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
<div class="tabs-wrapper">
<ul class="nav-tabs" role="tablist">
<li role="presentation"><a class="tab-link active" href="#html-tab" title="html tab" role="tab" onclick="showpane(event, 'html-tab')">FIRST</a></li>
<li role="presentation"><a class="tab-link" href="#css-tab" title="css tab" role="tab" onclick="showpane(event, 'css-tab')">SECOND</a></li>
<li role="presentation"><a class="tab-link" href="#result-tab" title="result tab" role="tab" onclick="showpane(event, 'result-tab')">THIRD</a></li>
</ul>
<!-- tab panel containing tab panes -->
<div class="tab-panel">
<div class="tab-pane active" id="html-tab" role="tabpanel">
FIRST CONTENT
</div>
<div class="tab-pane" id="css-tab" role="tabpanel">
SECOND CONTENT
</div>
<div class="tab-pane" id="result-tab" role="tabpanel">
THIRD CONTENT
</div>
</div>
</div>
【解决方案4】：
var tabLink = document.querySelectorAll(".tab-link"),
tabPane = document.querySelectorAll(".tab-pane")
tabLink.forEach(function(item) {
item.addEventListener('click', function(e) {
switch (e.target.classList[0]) {
case 'one':
tabPane[0].classList.add("active");
tabPane[1].classList.remove("active");
tabPane[2].classList.remove("active");
break;
case 'two':
tabPane[0].classList.remove("active");
tabPane[1].classList.add("active");
tabPane[2].classList.remove("active");
break;
case 'three':
tabPane[0].classList.remove("active");
tabPane[1].classList.remove("active");
tabPane[2].classList.add("active");
break;
default:
// whatever you'd like
}
}, false)
})
.nav-tabs {
display: flex;
align-items: center;
padding: 1rem 2rem;
list-style: none;
background: lightblue;
}
.tab-link {
margin-left: 4rem;
padding: 1rem;
border-radius: 1px;
transition: 0.2s;
display: block;
}
/*changes background of active tab link*/
.tab-link.active {
background: white;
}
/*hides tab panes*/
.tab-pane {
display: none;
}
/*shows active pane*/
.tab-pane.active {
display: block;
}
<div class="tabs-wrapper">
<ul class="nav-tabs" role="tablist">
<li role="presentation"><a class="one tab-link active" href="#html-tab" title="html tab" role="tab">FIRST</a></li>
<li role="presentation"><a class="two tab-link" href="#css-tab" title="css tab" role="tab">SECOND</a></li>
<li role="presentation"><a class="three tab-link" href="#result-tab" title="result tab" role="tab">THIRD</a></li>
</ul>
<!-- tab panel containing tab panes -->
<div class="tab-panel">
<div class="tab-pane active" id="html-tab" role="tabpanel">
FIRST CONTENT
</div>
<div class="tab-pane" id="css-tab" role="tabpanel">
SECOND CONTENT
</div>
<div class="tab-pane" id="result-tab" role="tabpanel">
THIRD CONTENT
</div>
</div>
</div>