#tinyJStip Got some buttons and only one can be pressed? Here's a simple way to swap their values!
Same applies to swapping which tab is selected and other similar situations.
(doesn't seem to work for tabIndex through 😵)
#HTML #a11y #JS #JavaScript #code #web #coding #frontend #dev #webDev #webDevelopment
![addEventListener('click', e => {
let b = e.target;
if(b.classList.contains('t') && b.ariaPressed !== 'true') {
let a = document.querySelector('.t[aria-pressed=true]');
[b.ariaPressed, a.ariaPressed] =
[a.ariaPressed, b.ariaPressed]
}
})](https://friendica.hellquist.eu/photo/preview/640/3292148 "addEventListener('click', e => {
let b = e.target;
if(b.classList.contains('t') && b.ariaPressed !== 'true') {
let a = document.querySelector('.t[aria-pressed=true]');
[b.ariaPressed, a.ariaPressed] =
[a.ariaPressed, b.ariaPressed]
}
})")
This entry was edited (2 weeks ago)
Ana Tudor 🐯
in reply to Ana Tudor 🐯 • • •Here's an example where I'm using something like this: switching between tabs.
Originally made this on @codepen after someone asked how to create tabs with rounded corners *and* borders.
https://codepen.io/thebabydino/pen/oNKLLbv
Then finally polished it this weekend.
Vanilla #CSS + #JS + a bit of #SVG #filter magic.🪄
Works with an image behind the tabs, the tabs may also have an image background.
#svgFilter #tabs #tabbed #JavaScript #web #webDev #webDevelopment #dev #code #coding #frontend #a11y