[英]How can i Change tab background color on selection using javascript?
Although the question is really common I really couldn't quite find a definite answer.虽然这个问题真的很常见,但我真的找不到确切的答案。 I have two tabs 'Tab1' and 'Tab2' I want the color of the active tab to change when the user clicks on it.
我有两个选项卡 'Tab1' 和 'Tab2' 我希望活动选项卡的颜色在用户点击它时改变。 Is there any way I can do it by pure js?
有什么办法可以通过纯js来完成吗?
CSS CSS
#tab1:hover, #tab2:hover, #tab3:hover {
background: teal;
}
#tab1Content, #tab2Content, #tab3Content {
width: 500px;
height: 100px;
padding: 20px;
border: 1px solid #B00098;
border-radius: 10px;
}
.tab button{
color:#1e84d8;
/*margin-bottom: 0 px;*/
background-color: #e7f6ff;
float: left;
cursor: pointer;
transition: 0.1s;
width:50%;
border-top: 1px solid #ebebeb;
border-left: 1px solid #ebebeb;
border-right: none;
border-bottom: 1px solid #20a3eb;
}
#tab1btn{
border: 1px solid rgb(19, 18, 18);
padding: 20px;
overflow: hidden;
color: rgb(16, 8, 32);
font-size: 25px;
font-style: initial;
font-family: 'Times New Roman', Times, serif;
}
#tab2btn{
border: 1px solid rgb(19, 18, 18);
padding: 20px;
overflow: hidden;
color: rgb(16, 8, 32);
font-size: 25px;
font-style: initial;
font-family: 'Times New Roman', Times, serif;
}
HTML HTML
<div class="tab" >
<button id= "tab1btn" value="Chasis_1">Chasis 1</button>
<button id= "tab2btn" value="Chasis_2" >Chasis 2</button>
</div>
You can use this not necessarily you need to use js from what I understood from your question this might be solution you are looking for你可以使用这个不一定你需要使用我从你的问题中理解的js 这可能是你正在寻找的解决方案
https://www.w3schools.com/cssref/sel_focus.asp https://www.w3schools.com/cssref/sel_focus.asp
It is basically the Css selector focus它基本上是 CSS 选择器的焦点
So you do element:focus then you can change the color所以你做 element:focus 然后你可以改变颜色
It isn't very tricky to do.这不是很棘手。 You can do it in very simple steps:
您可以通过非常简单的步骤来完成:
addEventListener
addEventListener
Example -例子 -
JS: JS:
function selectTab (e) {
e.preventDefault();
// select current active tab and remove active class (if-any)
let activeTab = document.querySelector('.tab > .active');
if (activeTab) activeTab.classList.remove('active');
e.target.element.classList.add('active');
}
HTML: HTML:
<div class="tab">
<button id="tab1btn" value="Chasis_1" onClick(e => selectTab(e))>
Chasis 1
</button>
<button id="tab2btn" value="Chasis_2" onClick(e => selectTab(e))>
Chasis 2
</button>
</div>
CSS: CSS:
.tab > button.active {
background-color: #cecece;
}
With the code you have given, I have added only one css
property to have class active
and a background-color
to the active as green
..,使用您提供的代码,我只添加了一个
css
属性以使类active
并将background-color
到活动状态为green
..,
.active {
background-color: green !important;
}
The JS
part inclusion, JS
部分包含,
const tab1btn = document.getElementById('tab1btn');
const tab2btn = document.getElementById('tab2btn');
function changeBackground(event){
const active = document.querySelector('.active');
if(active){
active.classList.remove('active')
}
event.target.className = "active";
}
tab1btn.addEventListener('click', changeBackground.bind(this));
tab2btn.addEventListener('click', changeBackground.bind(this));
I believe you have only these two button and need to change the background color based on the selection,我相信你只有这两个按钮,需要根据选择更改背景颜色,
Get those buttons using, getElementById()
and make addEventListener()
to each button separately and have a common function changeBackground()
which has the code that changes the active class between switching of tabs..使用
getElementById()
获取这些按钮,并将addEventListener()
到每个按钮,并具有一个公共函数changeBackground()
,该函数具有在选项卡切换之间更改活动类的代码。
const tab1btn = document.getElementById('tab1btn'); const tab2btn = document.getElementById('tab2btn'); function changeBackground(event){ const active = document.querySelector('.active'); if(active){ active.classList.remove('active') } event.target.className = "active"; } tab1btn.addEventListener('click', changeBackground.bind(this)); tab2btn.addEventListener('click', changeBackground.bind(this));
#tab1:hover, #tab2:hover, #tab3:hover { background: teal; } #tab1Content, #tab2Content, #tab3Content { width: 500px; height: 100px; padding: 20px; border: 1px solid #B00098; border-radius: 10px; } .tab button{ color:#1e84d8; /*margin-bottom: 0 px;*/ background-color: #e7f6ff; float: left; cursor: pointer; transition: 0.1s; width:50%; border-top: 1px solid #ebebeb; border-left: 1px solid #ebebeb; border-right: none; border-bottom: 1px solid #20a3eb; } #tab1btn{ border: 1px solid rgb(19, 18, 18); padding: 20px; overflow: hidden; color: rgb(16, 8, 32); font-size: 25px; font-style: initial; font-family: 'Times New Roman', Times, serif; } #tab2btn{ border: 1px solid rgb(19, 18, 18); padding: 20px; overflow: hidden; color: rgb(16, 8, 32); font-size: 25px; font-style: initial; font-family: 'Times New Roman', Times, serif; } .active { background-color: green !important; }
<div class="tab" > <button id= "tab1btn" value="Chasis_1">Chasis 1</button> <button id= "tab2btn" value="Chasis_2" >Chasis 2</button> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.