I have a page that we are trying to change to where 2 different categories of leadership are loaded upon the click of a button. Rather than having them placed one on top of the other. I was able to implement the change of the leadership categories on the click of the leadership group button. However, I cannot get the button to stay underlined when that category is active on page load or after clicking anywhere other than a button.
https://auduboncosites.wpengine.com/who-we-are/leadership/
I have tried a few different solutions, but they don’t seem to be working for my issue and the solutions I found are pretty old. I don’t actually think the JS I am using is doing anything in this instance and it’s all currently underlining based on CSS.
CSS:
.active:focus, .active:active, .active:visited {
text-decoration: underline;
}
JS:
var $buttons = jQuery('button');
$buttons.on('click',function() {
jQuery(this).toggleClass('active').siblings('button').removeClass('active');
})
I hope someone can help me find a solution.
Thanks,
2
Answers
So that’s just how the
:focus
state in HTML/CSS works. You have clicked on something, and that now has your focus until you click on something else. See my demo below. When something has focus it will have a green border. Click on one and it has focus. Click away or press tab to change the focus.Just remove your
:focus
styles if you don’t want that to happen.Revised/Edited answer
I wasn’t aware that you wanted to keep the link underlined. In that case this is even easier. You simply just need to apply a class when it’s selected and remove it from the others. It’s very close to the code you already posted, but I think you just need to have simpler CSS without messing with the
:focus
state. If the class is applied, it looks active. that’s it.Here’s a version using jQuery.
And here’s a version that does the same, but without jQuery being required.
As I understand from the question and the attached code, you want a specific button to be styled when click, and this effect should not be affected when clicking elsewhere. The code you provided contains more details. You must have a focused button that contains an active class, and you want the effect to continue even when the button is not focused . It is enough to rely on the class alone without depending on focus.