我使用样式化的单选按钮作为简单的导航。我只需要知道如何在保持我应用的样式的同时让它们链接到某些东西。
在下面的代码中，“主页”按钮链接到某物，但不再具有单选按钮的属性。
如何在链接时保持“悬停”和“点击”样式？
<!DOCTYPE html>
<html>
<head>
<style>
.navText {
font-family: helvetica, sans-serif;
font-size: 15px;
font-weight: 400;
display: table-cell;
text-align: center;
vertical-align: middle;
color: white;
}
input[type=radio] {
display: none;
}
.overlay {
display: inline-block;
position: relative;
float: left;
width: 100px;
height: 50px;
margin-left: 5px;
display: table;
background-color: grey;
}
input[type=radio]:hover + .overlay {
background-color: red;
}
input[type=radio]:checked + .overlay {
background-color: red;
}
</style>
</head>
<body>
<label><input type="radio" name="nav"><a href="#"><span class="overlay"><h1 class="navText">Home</h1></span></a></label>
<label><input type="radio" name="nav"><span class="overlay"><h1 class="navText">Postings</h1></span></label>
<label><input type="radio" name="nav"><span class="overlay"><h1 class="navText">About</h1></span></label>
<label><input type="radio" name="nav"><span class="overlay"><h1 class="navText">Contact</h1></span></label>
<label><input type="radio" name="nav"><span class="overlay"><h1 class="navText">Other</h1></span></label>
</body>
</html>
最佳答案
与其使用 anchor ( <a> ) 标签，不如设置 input的 onclick函数更改document.location的值到您想要的网址:
<label>
<input type="radio" name="nav" onclick="document.location='#';">
<span class="overlay">
<h1 class="navText">Home</h1>
</span>
</label>
请参阅以下有效的 jsfiddle 示例:http://jsfiddle.net/fry3gyp7/
关于html - 样式化的单选按钮，需要在保持样式的同时点击链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25317917/