Question

我使用样式的单选按钮作为简单的导航器。我只需要知道如何在保持我应用的样式的同时将它们链接到某些东西。

在下面的代码中，＆＃39; Home＆＃39;按钮链接到某个东西，但不再具有单选按钮的属性。

如何保持＆＃39;并点击了＆＃39;风格虽然有链接？

<!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>

Answer 1

不是使用锚点（<a>）标记，而是设置input的{{1}}函数，将onclick的值更改为您想要的网址：

document.location

请参阅以下工作jsfiddle示例：http://jsfiddle.net/fry3gyp7/

样式单选按钮，需要在保持风格的同时链接点击

1 个答案: