0

this is the same question as this one here: How to keep :active css style after click a button

and the solution from SW4:

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}
<button class='active'>Active</button>
<button class='focus'>Focus</button>
<a href='#target1' id='target1' class='target'>Target 1</a>
<a href='#target2' id='target2' class='target'>Target 2</a>
<a href='#target3' id='target3' class='target'>Target 3</a>

worked great, but now I'm trying to integrate this solution with a multi tab content like this:

/*CSS Multi Tab Video */
#multitab-video{position:relative;box-sizing:border-box;margin:0 auto;line-height:2em;font-size:15px!important;width:100%}
#multitab-video #movie-player{position:relative;padding-bottom:56.25%;padding-top:1.66666666666667em;height:0}
#multitab-video #movie-player iframe{position:absolute;top:0;left:0;width:100%;height:100%}
#multitab-video #server-list{position:relative;background:#fafafa;display:block}
#multitab-video #server-list .server-item:before{content:attr(title);width:9.93333333333333em;display:inline-block;padding-left:0.933333333333333em}
.target{border-bottom:1px solid #c8c8cb}
#multitab-video #server-list a{color:#334;text-decoration:none;border:1px solid #443;padding:0.333333333333333em 0.666666666666667em;display:inline-block;margin:0.333333333333333em;box-sizing:border-box;} 
a:active { background: red;} 
a:focus {background: red}
a:target {background: red}
<div id="multitab-video">
    <div id="movie-player">
        <iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="true" frameborder="no" height="450" mozallowfullscreen="true" name="search_iframe" scrolling="no" src="https://www.youtube.com/embed/BBNllKClcgw?autoplay=1" allow='autoplay' title="YouTube video player" webkitallowfullscreen="true" width="600"></iframe></div>
    <div id="server-list">
        <div class="target" title="EMULATORS:">
            <a href="https://www.youtube.com/embed/BBNllKClcgw" allow='autoplay' target="search_iframe">Trailer</a>
            <a allowfullscreen="true" frameborder="no" height="450" href="https://www.retrogames.cc/embed/19840-super-pang-japan.html" autoplay= true allow='autoplay' mozallowfullscreen="true" scrolling="no" target="search_iframe" webkitallowfullscreen="true" width="600" class='target'>Emulator 1</a>
            <a allowfullscreen="true" frameborder="no" height="450" href="https://www.retrogames.cc/embed/10180-super-pang-world-900914.html" mozallowfullscreen="true" scrolling="no" target="search_iframe" webkitallowfullscreen="true" width="600" class='target'>Emulator 2</a>
        <a href='#target1' id='target1' class='target'>Target 1</a>
            <a href='#target2' id='target2' class='target'>Target 2</a>
<div id="server-list" ><br />
</div>

How can I do it?

thanks

Alcino Major
  • 1
  • Does this answer your question? [How to keep :active css style after click a button](https://stackoverflow.com/questions/31178653/how-to-keep-active-css-style-after-click-a-button) – httpanand Oct 20 '21 at 15:12

0 Answers0