CSS多选择器跳转到页面顶部

时间:2015-08-27 17:37:27

标签: html css css-selectors

我在div中连接了5个标签和5个无线电,当我点击radio3时,CSS正在使div1隐藏起来。没有div包装标签和无线电它工作,但有了它,我似乎无法使其工作。当它被包裹时,我点击一个标签,它会跳到页面顶部。我尝试了我能想到的每一个选择器。

CSS:

input[type=radio] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
label { 
  display: inline-block;
  margin: 60px 0 10px 0;
  cursor: pointer;
}

/* Default State */
.hombre, .mujer, .nino, .bicis, .calzado{
	display: none;
}
/* Toggled State */
.cat input[type=radio]#menu-hombre:checked ~ div.hombre, .cat input[type=radio]#menu-mujer:checked ~ div.mujer, .cat input[type=radio]#menu-nino:checked ~ div.nino, .cat input[type=radio]#menu-bicis:checked ~ div.bicis, .cat input[type=radio]#menu-calzado:checked ~ div.calzado {
	display:block;
}
.cat input[type=radio]#menu-hombre ~ div.mujer, div.nino, div.bicis, div.calzado {
	display: none;
}
.cat input[type=radio]#menu-mujer ~ div.hombre, div.nino, div.bicis, div.calzado {
	display: none;
}
.cat input[type=radio]#menu-nino ~ div.hombre, div.mujer, div.bicis, div.calzado {
	display: none;
}
.cat input[type=radio]#menu-bicis ~ div.hombre, div.nino, div.mujer, div.calzado {
	display: none;
}
.cat input[type=radio]#menu-calzado ~ div.hombre, div.nino, div.bicis, div.mujer {
	display: none;
}
<div class="cat">
 <label for="menu-hombre"><i class="fa fa-male"></i>Hombre</label>
 <input type="radio" id="menu-hombre" name="tallas">
 <label for="menu-mujer"><i class="fa fa-female"></i>Mujer</label>
 <input type="radio" id="menu-mujer" name="tallas">
 <label for="menu-nino"><i class="fa fa-child"></i>Niño</label>
 <input type="radio" id="menu-nino" name="tallas">
 <label for="menu-bicis"><i class="fa fa-bicycle"></i>Bicis</label>
 <input type="radio" id="menu-bicis" name="tallas">
 <label for="menu-calzado"><i class="fa fa-street-view"></i>Calzado Y Accesorios</label>
 <input type="radio" id="menu-calzado" name="tallas">
</div>
<div class="hombre"><p>Hombre</p></div>
<div class="mujer"><p>Mujer</p></div>
<div class="nino"><p>Niño</p></div>
<div class="bicis"><p>Bicis</p></div>
<div class="calzado"><p>Calzado Y Accesorios</p></div>

这里的想法是当我点击标签Hombre时显示div hombre,并隐藏所有其他div。与其他标签和相应的div相同。没有div cat,它可以工作。有了它,它会跳到页面顶部。有什么想法吗?

0 个答案:

没有答案