通过jQuery将单选按钮转换为链接
Turn radio buttons into links by jQuery
我不知道这种表单控制器的具体名称是什么(如果有的话),但基本上我想像这样更改无线电元素;
<input type="radio" name="size" value="S" id="size_S" />
<label for="size_S">S</label>
<input type="radio" name="size" value="M" id="size_M" />
<label for="size_M">M</label>
<input type="radio" name="size" value="L" id="size_L" />
<label for="size_L">L</label>
。进入风格化的链接,其中选中的具有特殊类。例如,我会在 Macys.com 上列出大小选择元素。
如何将收音机变成这些类型的盒子链接?是否有已经执行此操作的库或插件?
我可以修改 DOM,但为了方便非 JS 用户,元素需要是单选按钮。
您几乎可以重用标准表单元素。启用 js 后,隐藏单选按钮,设置标签样式,并绑定 click
事件以添加 active
/selected
类。单击标签仍将选择基础单选按钮。
示例 jsFiddle: http://jsfiddle.net/Y6BzY/
.JS
$('input[type="radio"], label').addClass('js');
$('label').on('click', function() {
$('label').removeClass('active');
$(this).addClass('active');
});
.CSS
input[type="radio"].js {
display: none;
}
label.js {
display: block;
float: left;
margin-right: 5px;
border: 1px solid black;
padding: 4px;
cursor: pointer;
}
label.js.active {
border: 1px solid blue;
color: blue;
}
Ephram,
我访问了您提供的链接,我只能看到跨度中有一个数字用于选择尺寸。你是说那些,还是喜欢那些?
关于你的问题:我知道显示链接而不是框的原因是缺乏 js 支持。您是否考虑过使用带有硬编码单选按钮的标签,并且像您的示例中一样,在 noscript 标签之外使用
?无论如何,老实说,我真的不认为有必要操纵 DOM。
相关文章:
- 将纯文本URL转换为可单击链接
- 使用Javascript将链接转换为iframe
- 修复Javascript代码以将文本中的所有Youtube链接转换为Youtube ID功能
- 如何在jquery中将链接转换为seo友好的url
- 每个部分附加一次多个链接转换变量
- 如何将地址链接转换为单击时更改页面的按钮
- 如何将文本链接转换为谷歌 API 剥离的真实链接
- Acrobat JavaScript-将JavaScript页面链接转换为“;真正的链接”;
- 如何基于活动转换中断或链接转换
- 将HTML中的链接转换为锚点
- HTML将链接转换为按钮
- 将超链接转换为按钮
- 将文本链接转换为图像链接
- 将所有文本链接转换为实际链接
- 使用JavaScript将超链接转换为纯文本
- ASP.. NET MVC 3:将JavaScript链接转换为嵌入式/压缩html标记的助手
- 正在将链接转换为链接
- 如何将href中有javascript:__doPostBack的链接转换为wget/curl/lynx可以理解的普通u
- 如何阻止Chrome在复制/粘贴时将相对链接转换为绝对链接
- 将指向SVG的链接转换为内联SVG元素