我正在创建一个选项卡式导航栏,其中当选项卡处于活动状态时,它应该更改其颜色,我将其设置为要更改的颜色。通过选项卡浏览页面工作正常,但活动选项卡上的颜色突出显示似乎不起作用。
这是我目前的代码:
HTML:
<section class="tab" id="active_Current_Tabs">
<header>Active/Current Tabs</header>
<nav class="navbar">
<ul>
<li class="btn currentTab" onclick="activeTab(event, 'lorem7')">TAB1</li>
<li class="btn currentTab" onclick="activeTab(event, 'lorem8')">TAB2</li>
<li class="btn currentTab" onclick="activeTab(event, 'lorem9')">TAB3</li>
</ul>
</nav>
<main class="main-doc">
<article class="selectedPage" id='lorem7'>
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, est?</p>
</article>
<article class="selectedPage" id="lorem8">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, est?</p>
</article>
<article class="selectedPage" id="lorem9">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, est?</p>
</article>
</main>
</section>
CSS:
article {
text-align: center;
width: 100%;
height: 300px;
max-height: 300px;
margin: 0;
}
/*navbar css*/
nav {
width: 100%;
height: 75px;
padding: 0;
margin: 0;
}
nav ul {
height: 100%;
padding: 0;
display: flex;
list-style: none;
justify-content: space-around;
}
.btn {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100%;
background-color: #8b9d98;
cursor: pointer;
font-weight: 500;
}
.btn:hover {
background-color: #d7e0e0;
font-weight: 700;
transition: .5s;
}
/*main css*/
main {
margin-top: 0;
}
/*Active/Current Tab */
#lorem7 {
display: flex;
flex-direction: column;
background-color: #49c2a4;
align-items: center;
justify-content: center;
}
#lorem8 {
display: none;
flex-direction: column;
background-color:#35386f;
align-items: center;
justify-content: center;
}
#lorem9 {
display: none;
flex-direction: column;
background-color:#e28968;
align-items: center;
justify-content: center;
}
使用Javascript:
// active/current tab function
function activeTab(evnt, currPage) {
var currenttab;
var pages = document.getElementsByClassName('selectedPage');
for (i = 0; i < pages.length; i++) {
pages[i].style.display = "none";
}
//for dehighlighting inactive tabs
currenttab = document.getElementsByClassName('currentTab');
for(j = 0; j < currenttab.length; j++) {
currenttab[j].className = currenttab[j].className.replace("green", " ");
}
document.getElementById(currPage).style.display = "flex";
evnt.currentTarget.className += "green"; //this appends the color to active tab
}
请帮忙! T_T
我不确定你要用“绿色”类做什么,因为你的CSS中没有规则。假设您希望活动标签与活动页面的颜色相同,我回答了这个问题。对不起,如果这不是你想要的,但我认为这是有道理的。
为了避免特定类名的问题,您可以使用.classList方法,如“add”和“remove”。这样您就不必担心标记中类名的顺序。例子:
tabs[i].classList.remove('active')
e.currentTarget.classList.add('active')
您还可以动态附加事件侦听器(单击处理程序)以使HTML保持整洁。例:
for(j = 0; j < tabs.length; j++) {
// attach event listener to all tabs
tabs[j].addEventListener('click', clickTab)
}
您还可以通过为公共类指定类似的样式来减少CSS的重复性:
.page {display:none;}
.page.active {
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
我修改了您的ID,以便能够独立引用选项卡和页面,而无需将参数显式传递给单击处理函数。例:
<li id="t2" class="tab">TAB2</li>
...
<article class="page" id="p2">...</article>
这是我的JS Bin:
evnt.currentTarget.className += "green";
此行将添加到现有的className。
所以你的班级class="btn currentTab"
变成class="btn currentTabgreen"
而不是class="btn currentTab green"
如果你之前没有添加绿色。因此,最好使用currenttab[j].className.replace("green", "");
重置之前的绿色类和evnt.currentTarget.className += " green";
来设置新的绿色类。
编辑:这确实意味着每次使用一个空格时类名将继续增长。所以最好的方法是使用classList.add()
和classList.remove()
而不是手动编辑类字符串。
function activeTab(evnt, currPage) {
var currenttab;
var pages = document.getElementsByClassName('selectedPage');
for (i = 0; i < pages.length; i++) {
pages[i].style.display = "none";
}
//for dehighlighting inactive tabs
currenttab = document.getElementsByClassName('currentTab');
for(j = 0; j < currenttab.length; j++) {
currenttab[j].className = currenttab[j].className.replace("green", "");
}
document.getElementById(currPage).style.display = "flex";
evnt.currentTarget.className += " green"; //this appends the color to active tab
}
article {
text-align: center;
width: 100%;
height: 300px;
max-height: 300px;
margin: 0;
}
/*navbar css*/
nav {
width: 100%;
height: 75px;
padding: 0;
margin: 0;
}
nav ul {
height: 100%;
padding: 0;
display: flex;
list-style: none;
justify-content: space-around;
}
.btn {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100%;
background-color: #8b9d98;
cursor: pointer;
font-weight: 500;
}
.btn:hover {
background-color: #d7e0e0;
font-weight: 700;
transition: .5s;
}
/*main css*/
main {
margin-top: 0;
}
/*Active/Current Tab */
#lorem7 {
display: flex;
flex-direction: column;
background-color: #49c2a4;
align-items: center;
justify-content: center;
}
#lorem8 {
display: none;
flex-direction: column;
background-color:#35386f;
align-items: center;
justify-content: center;
}
#lorem9 {
display: none;
flex-direction: column;
background-color:#e28968;
align-items: center;
justify-content: center;
}
.green {
background-color: green;
}
<section class="tab" id="active_Current_Tabs">
<header>Active/Current Tabs</header>
<nav class="navbar">
<ul>
<li class="btn currentTab" onclick="activeTab(event, 'lorem7')">TAB1</li>
<li class="btn currentTab" onclick="activeTab(event, 'lorem8')">TAB2</li>
<li class="btn currentTab" onclick="activeTab(event, 'lorem9')">TAB3</li>
</ul>
</nav>
<main class="main-doc">
<article class="selectedPage" id='lorem7'>
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, est?</p>
</article>
<article class="selectedPage" id="lorem8">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, est?</p>
</article>
<article class="selectedPage" id="lorem9">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, est?</p>
</article>
</main>
</section>