我试图在箭头图片的右侧放置一个单选按钮,但由于某种原因它总是在其他地方出现。我想要它在箭头和 Masculino 之间。
我也不希望这个按钮真正记录任何东西,它只是为了审美目的。但我希望当有人单击此框以填充单选按钮然后链接到另一个页面。
这可能吗?让整个盒子成为链接?我正在考虑将整个 div 包装在一个<a href>
我认为可行的方法中。
我试图在箭头图片的右侧放置一个单选按钮,但由于某种原因它总是在其他地方出现。我想要它在箭头和 Masculino 之间。
我也不希望这个按钮真正记录任何东西,它只是为了审美目的。但我希望当有人单击此框以填充单选按钮然后链接到另一个页面。
这可能吗?让整个盒子成为链接?我正在考虑将整个 div 包装在一个<a href>
我认为可行的方法中。
像http://jsfiddle.net/XEk5d/2/这样的东西,点击进入另一个页面的部分需要 JavaScript。
CSS
#answers {
width:220px;
height:50px;
background-color:#DDDDDD;
border-top:1px solid black;
border-bottom:1px solid black;
margin-top:20px;
}
#arrowcenter {
width:71px;
height:31px;
background-image:url('http://fortmovies.com/brazil/arrow.png');
background-position:0 50%;
background-repeat:no-repeat;
height:100%;
display:inline-block;
vertical-align:middle;
}
#answerstext {
background-position:0 50%;
display:inline-block;
vertical-align:middle;
}
form{
display:inline-block;
}
input{
vertical-align:middle;
}
HTML
<div id="answers">
<div id="arrowcenter"></div>
<form>
<input type="radio" name="sex" value="male" />
<div id="answerstext">Masculino</div>
</form>
</div><!-- end grayAnswer -->?
试试这个:http: //jsfiddle.net/BD8j2/8/。
(本文第一版中的 HTML 无效(input
inside a
),并且不兼容跨浏览器,因此我已将其替换为 JavaScript 示例。)
HTML:
<div class="answers">
<form>
<label class="links">
<input type="radio" name="sex" value="male" />
<a href="http://w3.org">Masculino</a>
</label>
</form>
</div>
<div class="answers">
<form>
<label class="links">
<input type="radio" name="sex" value="female" />
<a href="http://w3.org">Femenino</a>
</label>
</form>
</div>
JavaScript:
function init() {
var link_elems = getElementsByClass('links');
for(var i = 0; i < link_elems.length; i++) {
addEvent(link_elems[i], 'click', goToLink);
}
}
function goToLink(e) {
if(e.stopPropagation) {
e.stopPropagation();
} else if(typeof e.cancelBubble != 'undefined') {
e.cancelBubble();
}
e.currentTarget.children[0].checked = true;
window.location = e.currentTarget.children[1].href;
}
function addEvent(elem, event, handler) {
if(elem.addEventListener) {
elem.addEventListener(event, handler, false);
} else if(elem.attachEvent) {
elem.attachEvent('on' + event, handler);
} else {
elem['on' + event] = handler;
}
}
function getElementsByClass(className) {
if(document.getElementsByClassName) {
return document.getElementsByClassName(className);
} else if(document.all) {
var everything = document.all;
var all_length = everything.length;
var matches = [];
for (var i = 0; i < all_length; i++) {
if(everything[i].className == className) {
matches[matches.length] = everything[i];
}
}
return matches;
}
return false;
}
addEvent(window, 'load', init);
CSS:
.answers {
width: 220px;
height: 50px;
margin-top: 20px;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: #ddd;
background-image: url('http://fortmovies.com/brazil/arrow.png');
background-repeat: no-repeat;
background-position: 0 50%;
}
.answers label {
float: left;
margin-left: 75px;
padding-top: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold
}
.answers input {
margin-right: 5px
}
在以前的版本中,JavaScript 需要将链接名称和目标放在两个数组中,现在我已经自动完成了。