вкладки в html
подскажите, хочу сделать вкладки.
нашел такой код: <!DOCTYPE html> <html> <head> <style> .tabs { position: relative; margin: 0 auto; width: 800px; padding-top:30px; } .tabs .labels{ margin:0 auto; width:600px; border:1px solid #dadada; height:62px; } .tabs label { color: #555; cursor: pointer; display: block; float: left; width: 199px; padding:20px 0; vertical-align:middle; position: relative; text-align: center; border-right:1px solid #dadada; font-size:18px; } .tabs label:last-child{ border-right:0px solid; } .tabs input { position: absolute; left: -9999px; } #tab_1:checked ~ #tab_l1, #tab_2:checked ~ #tab_l2, #tab_3:checked ~ #tab_l3 { background: #dadada; border-color: #fff; top: 0; z-index: 3; } .tabs_cont { background: #fff; position: relative; z-index: 2; top:30px; height: 230px; } .tabs_cont > div { position: absolute; left: -9999px; top: 0; opacity: 0; -moz-transition: opacity .5s ease-in-out; -webkit-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; } #tab_1:checked ~ .tabs_cont #tab_c1, #tab_2:checked ~ .tabs_cont #tab_c2, #tab_3:checked ~ .tabs_cont #tab_c3 { position: static; left: 0; opacity: 1; } </style> </head> <body> <section class="tabs"> <input id="tab_1" type="radio" name="tab" checked /> <input id="tab_2" type="radio" name="tab" /> <input id="tab_3" type="radio" name="tab" /> <div class="labels"> <label for="tab_1" id="tab_l1">11</label> <label for="tab_2" id="tab_l2">2222</label> <label for="tab_3" id="tab_l3">3333</label> </div><!--labels--> <div style="clear:both"></div> <div class="tabs_cont"> <div id="tab_c1">Content of first tab</div> <div id="tab_c2">Content of first second</div> <div id="tab_c3">Content of third tab</div> </div> </section> </body> </html> Вроде все получилось, но не могу никак изменить цвет выбранной вкладки. надо сделать бэкграунд в checked. Тоесть #tab_1:checked ~ #tab_l1, #tab_2:checked ~ #tab_l2, #tab_3:checked ~ #tab_l3 { background: #dadada; border-color: #fff; top: 0; z-index: 3; } не работает. подскажите, пожалуйста, что делать? |
Цитата:
<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=windows-1251' /> <!-- <script src='http://code.jquery.com/jquery-latest.js'></script> <script src="https://code.angularjs.org/1.3.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.3.9/angular-route.js"></script> --> <style type='text/css'> .tabs { position: relative; margin: 0 auto; width: 800px; padding-top:30px; } .tabs .labels{ margin:0 auto; width:600px; border:1px solid #dadada; height:62px; } .tabs label { color: #555; cursor: pointer; display: block; float: left; width: 199px; padding:20px 0; vertical-align:middle; position: relative; text-align: center; border-right:1px solid #dadada; font-size:18px; } .tabs label:last-child{ border-right:0px solid; } .tabs input { position: absolute; left: -9999px; } #tab_1:checked ~ .labels #tab_l1, #tab_2:checked ~ .labels #tab_l2, #tab_3:checked ~ .labels #tab_l3 { background: #dadada; border-color: #fff; top: 0; z-index: 3; } .tabs_cont { background: #fff; position: relative; z-index: 2; top:30px; height: 230px; } .tabs_cont > div { position: absolute; left: -9999px; top: 0; opacity: 0; -moz-transition: opacity .5s ease-in-out; -webkit-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; } #tab_1:checked ~ .tabs_cont #tab_c1, #tab_2:checked ~ .tabs_cont #tab_c2, #tab_3:checked ~ .tabs_cont #tab_c3 { position: static; left: 0; opacity: 1; } </style> <script type='text/javascript'> </script> </head> <body> <section class="tabs"> <input id="tab_1" type="radio" name="tab" checked /> <input id="tab_2" type="radio" name="tab" /> <input id="tab_3" type="radio" name="tab" /> <div class="labels"> <label for="tab_1" id="tab_l1">11</label> <label for="tab_2" id="tab_l2">2222</label> <label for="tab_3" id="tab_l3">3333</label> </div><!--labels--> <div style="clear:both"></div> <div class="tabs_cont"> <div id="tab_c1">Content of first tab</div> <div id="tab_c2">Content of first second</div> <div id="tab_c3">Content of third tab</div> </div> </section> </body> </html> |
Часовой пояс GMT +3, время: 03:14. |