keep colored tab button with css only

Devil Tech 0
Viewed 49

enter image description here

i everyone!

I need help, I would like the tabs: tab1 - tab2 - tab3 remained white after clicking, now in my code in hover it turns white, but then everything vanishes. How can I do with only css, because js does not support me the system? Any advice and help is welcome! Thank you all!!

<style>
 body {
 font-family:"Open Sans";
 background:white;
 height:300px;
 font-size:14px;
  }

 .tab section {
 display:none;
  }

 .tab section:target, .tab section:last-of-type {
 display:block;
 }

  .tab section:target~section {
 display:none;
 }


 .L1 {
 padding:17px;
 border:1px solid #2c3e50;
 color:white !important;
 padding-left:10px;
 padding-right:10px;
 margin-left:-1px;
 }

 .L1:hover {
 background-color:white;
 color:black !important;
 border-bottom:1px solid white;
 padding:17px;
 padding-left:10px;
 padding-right:10px;
 }
  </style>
    <section class="tab" style="border:none;background:#1abc9c;max-width:46.5rem;width:100%;margin:5px auto;height:51px;line-height:51px;">
 <a class="L1" href="#tab1">tab1</a>
 <a class="L1" href="#tab2" style="margin-left:-5px;">tab2</a>
 <a class="L1" href="#tab3" style="margin-left:-5px;">tab3</a>
  <section id="tab2" style="margin-top:-60px !important;padding-top:61px;">
        <span >hello2</span>
   </section>
   <section id="tab3" style="margin-top:-60px !important;padding-top:61px;">
        <span>hello3</span>
   </section>
   <section id="tab1" style="margin-top:-60px !important;padding-top:61px;">
    <span >hello1</span>
  </section>
  </section>
css html
1 Answers

input, .content {
    display: none;
    background: #1f7507;
    line-height: 25px;
    padding: 5px 25px;
    color: #fff;
    font: normal 1em/150% Sans-Serif;
    min-width: 200px;
}

#one:checked ~ .one,
#two:checked ~ .two,
#three:checked ~ .three {display: block;}

label {
    cursor: pointer;
    background: #999;
    height: 25px;
    padding: 5px 10px;
    display: inline-block;
    text-align: center;
    color: #fff;
    font: normal 1em/150% Sans-Serif;
    margin-right: -3px;
    transition: background .25s linear;  
}

label:hover, input:checked + label {background: #1f7507;}

h3, p {
    text-indent: 25px;
    text-align: justify;
}
<input type="radio" name="nav" id="one" checked="checked"/>
<label for="one">tab 1</label>

<input type="radio" name="nav" id="two"/>
<label for="two">tab 2</label>

<input type="radio" name="nav" id="three"/>
<label for="three">tab 3</label>

<article class="content one">
    <h3>sample 1</h3>
    <p>heyyy</p>
</article>

<article class="content two">
    <h3>sample 2</h3>
    <p>howdy</p>
</article>

<article class="content three">
    <h3>sample 3</h3>
    <p>hello</p>
</article>

Kirby Tan0
Related