div element not displaying correctly

Can anyone see what I am doing wrong?
I believe the <div> tag elements under the class="tab" section should initially display:none

Code:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title> CSS RBtn Menus </title>



<style>

 label:hover { background: orange; }



 input[type='radio'] { position: absolute; left: -99px; } 

 input[type='radio']:checked + a { background: lime; } */



 .tab div { display: none; }

 .tab div:target { display: block; border: 1px solid red; width: 50%; }



 a { text-decoration: none; }

</style>



</head>

<body>



 <h2>Radio button demo</h2>

 <input type="radio" name="city" id="nyRB"> <a href="#linkRB1"><label for='nyRB'>New York</label></a>

 <input type="radio" name="city" id="bosRB"> <a href="#linkRB2"><label for='bosRB'>Boston</label></a>

 <input type="radio" name="city" id="sfoRB"> <a href="#linkRB3"><label for='sfoRB'>San Francisco</label></a>

 <input type="radio" name="city" id="dcRB"> <a href="#linkRB4"><label for='dcRB'>Washington DC </label></a>

 <input type="radio" name="city" id="blankRB" checked> <a href="#"><label for='blankRB'>blank</label></a>



 <div class="tab">

  <div id="linkRB1"> <h3>New York Content</h3> </div>

  <div id="linkRB2"> <h3>Boston Content</h3> </div>

  <div id="linkRB3"> <h3>San Francisco Content</h3> </div>

  <div id="linkRB4"> <h3>Washington DC Content</h3> </div>

 </div>



<script>

// No JS used

</script>



</body>

</html>

I expected the elements to toggle when the links are selected with the :target parameter.

برچسب: نویسنده: آیلین رضوانی تاريخ: يکشنبه 15 مرداد 1396 ساعت: 8:34

درباره سایت

آخرین مطالب

امکانات وب

div element not displaying correctly

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه