I’ve modified your example slightly to give an example of what my comment was describing. I’ve added the button that was clicked as a parameter to the showPanel() function, and handled appropriately.
function showPanel(btn, idx) {
clearActive();
btn.classList.add('active');
}
function clearActive() {
const active = document.querySelector('.buttonContainer button.active');
if (active) {
active.classList.remove('active');
}
}
.tabContainer .buttonContainer button {
width: 25%;
height: 100%;
float: left;
outline: none;
cursor: pointer;
background-color: #eee;
border: 1px solid #999999;
border-radius: 15px 15px 0px 0px;
}
.tabContainer .buttonContainer button.active {
background-color: white;
border-bottom: 1px solid white;
}
<div class="tabContainer">
<div class="buttonContainer">
<button autofocus onclick="showPanel(this, 0)">Course Details</button>
<button onclick="showPanel(this, 1)">Workshop Schedule</button>
<button onclick="showPanel(this, 2)">Online Course Details</button>
<button onclick="showPanel(this, 3)">Online Exam Details</button>
</div>
</div>
I have a html element where I switch tabs. When I click on the tab, the focus works perfect in terms of highlighting the background colour white and the bottom border is white.
But when I click anyway on the screen, the selected tab’s bottom border returns to the default grey border.
What I am trying to do is keep all bottom border of the tabs #999999 except for the selected tab which will have the bottom border white.
How do I not lose the bottom border colour white for the selected tab when I click anyway on screen?
function showPanel() {} // just for suppressing error.
.tabContainer .buttonContainer button {
width: 25%;
height: 100%;
float: left;
outline: none;
cursor: pointer;
background-color: #eee;
border: 1px solid #999999;
border-radius: 15px 15px 0px 0px;
}
.tabContainer .buttonContainer button:focus {
background-color: white;
border-bottom: 1px solid white;
}
<div class="tabContainer">
<div class="buttonContainer">
<button autofocus onclick="showPanel(0)">Course Details</button>
<button onclick="showPanel(1)">Workshop Schedule</button>
<button onclick="showPanel(2)">Online Course Details</button>
<button onclick="showPanel(3)">Online Exam Details</button>
</div>
</div>
Thanks Jacob, seems to not be working. Still loses focus when I click off the it
@BruceyBandit Just to make sure I understand correctly, my snippet isn’t working correctly, or am I misunderstanding something?
