Продолжайте показывать содержимое вкладок, когда пользователь нажимает на них
Я работаю с вкладкой, встроенной в css, некоторые коды не работают, так как я новичок в css.
Вот CSS:
input#ckTab{display: none;}
.tabs{width: 100%;}
button{position:relative;height:60px;background:#fff;cursor:pointer;}
.ct-box {text-align:left;}
.ct-box > div {display: none;}
.lblUk-a:focus-within ~ .ct-box .ct-a {display: block;}
.lblUk-b:focus-within ~ .ct-box .ct-b {display: block;}
.lblUk-c:focus-within ~ .ct-box .ct-c {display: block;}
.lblUk-d:focus-within ~ .ct-box .ct-d {display: block;}
.lblUk-e:focus-within ~ .ct-box .ct-e {display: block;}
И, HTML:
<div class = "container">
<input type = "checkbox" id = "ckTab" name = "ckTab" checked />
<div class = "tabs">
<div class = "lblUk">
<button class = "lblUk-a">M/25</button>
<button class = "lblUk-b">S/40</button>
<button class = "lblUk-c">X/21</button>
<button class = "lblUk-d">L/45</button>
<button class = "lblUk-e">XL/50</button>
<div class = "ct-box">
<div class = "ct-a">a ct</div>
<div class = "ct-b">b ct</div>
<div class = "ct-c">c ct</div>
<div class = "ct-d">d ct</div>
<div class = "ct-e">e ct</div>
</div>
</div>
</div>
</div>
Я хочу: когда я нажимаю на вкладку (например, M / 25 и т. д.), Появляется содержимое каждой вкладки (это работает), но когда я нажимаю метку или содержимое открытой вкладки, оно скрывается. Я хочу, чтобы это продолжалось.
Содержимое каждой из вкладок продолжает отображаться, когда я НАЖИМАЮ на нее. Вот рабочий пример: JsFiddle
@dalelandry, я изучаю, как работает css. Я бы использовал его в следующий раз.
Взгляните на этот вопрос... stackoverflow.com/a/18752327/1533592
@dalelandry, РЕШЕНО! Я нахожу трудным для моей текущей работы, за исключением использования JS. Но ваше предложение использовать ссылку (использование флажка для управления моим кодом может РАБОТАТЬ, как я хочу).
Отвечает ли это на ваш вопрос? Отображение и скрытие div при условии флажка с помощью css
Тот же случай, но другой, как манипулировать вкладкой (на мой взгляд).
Ответы 2
добавление строки ниже к вашему коду сохранит вашу вкладку, если ваша мышь останется на ней после нажатия, но перемещение за пределы вкладки скроет ее.
.ct-a:hover, .ct-b:hover, .ct-c:hover, .ct-d:hover , .ct-e:hover {display: block}
чтобы сделать это правильно, вы должны либо использовать javascript, либо попробовать использовать невидимые флажки в своих кодах, если вы хотите остаться с чистым css.
Это хорошо, но не могли бы вы дать ему еще один, так как мне нужно, чтобы он продолжал отображаться, когда мышь потеряла фокус (или щелкните пустую область из контейнера / div)
как checkboxes сделать это, пожалуйста?
@PaijoPapuastoros вы можете поместить ввод флажка внутри своих кнопок, используя position: absolute и придав ему тот же размер, что и кнопка, без прозрачности, поэтому, когда вы нажимаете на кнопку, он фактически активирует флажок, и вы можете использовать селектор :checked, чтобы сделать вкладки видимыми
С кодом в моем вопросе мне было трудно заставить его работать так, как я хочу. Ты, дейл, тогда предлагаешь использовать чекбокс.
function check(element){
if (element.checked){
var checkboxes = document.getElementsByClassName('ckbox');
for(var i=0;i<checkboxes.length;i++){
if (checkboxes[i]!=element)
checkboxes[i].checked = false;
}
}
}.tabs{width:100%;}
label{z-index:10;position:relative;height:30px;background:#fff;cursor:pointer;padding:5px 10px;border:1px solid #dedede;}
.ct-box {text-align:left;}
.ct-a,.ct-b,.ct-c,.ct-d,.ckbox{display:none;}
.ck_m25:checked ~ .ct-box .ct-a{display:block;}
.ck_s40:checked ~ .ct-box .ct-b{display:block;}
.ck_x21:checked ~ .ct-box .ct-c{display:block;}
.ck_l45:checked ~ .ct-box .ct-d{display:block;}<div class = "container">
<div class = "tabs">
<div class = "lblUk">
<label for = "m25" class = "lblUk-a uks uk1">M/25</label>
<input type = "checkbox" class = "ckbox ck_m25" id = "m25" onchange='check(this)'/>
<label for = "s40" class = "lblUk-b uks uk2">S/40</label>
<input type = "checkbox" class = "ckbox ck_s40" id = "s40" onchange='check(this)'/>
<label for = "x21" class = "lblUk-c uks uk3">X/21</label>
<input type = "checkbox" class = "ckbox ck_x21" id = "x21" onchange='check(this)'/>
<label for = "l45" class = "lblUk-d uks uk4">L/45</label>
<input type = "checkbox" class = "ckbox ck_l45" id = "l45" onchange='check(this)'/>
<div class = "ct-box">
<div class = "ct-a">a ct</div>
<div class = "ct-b">b ct</div>
<div class = "ct-c">c ct</div>
<div class = "ct-d">d ct</div>
</div>
</div>
</div>
</div>Вот рабочий пример: Jsfiddle
Примечание. Я использую JS, чтобы сделать его потрясающим.
Почему бы не использовать JS для этого?