jquery选项卡使用选中的单选按钮而不是单击链接
jquery tabs using radio button checked instead of link click
我想做jquery选项卡,但这次我希望选项卡的切换取决于单选按钮检查,而不仅仅是点击链接,这是正常的jquery选项卡
<div id="tab-container" class="tab-container">
<ul class='etabs'>
<li class='tab'><a href="#tabs1-html">HTML Markup</a></li>
<li class='tab'><a href="#tabs1-js">Required JS</a></li>
<li class='tab'><a href="#tabs1-css">Example CSS</a></li>
</ul>
<div id="tabs1-html">
<h2>HTML Markup for these tabs</h2>
<!-- content -->
</div>
<div id="tabs1-js">
<h2>JS for these tabs</h2>
<!-- content -->
</div>
<div id="tabs1-css">
<h2>CSS Styles for these tabs</h2>
<!-- content -->
</div>
</div>
<script src="/javascripts/jquery.js" type="text/javascript"></script>
<script src="/javascripts/jquery.hashchange.js" type="text/javascript"></script>
<script src="/javascripts/jquery.easytabs.js" type="text/javascript"></script>
$('#tab-container').easytabs();
.etabs { margin: 0; padding: 0; }
.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
.tab a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
.tab a:hover { text-decoration: underline; }
.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
.tab a.active { font-weight: bold; }
.tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
这是这篇文章的链接-----http://os.alfajango.com/easytabs/#tabs1-css
我想做这样的选项卡,但不是让操作发生在点击选项卡链接时,我想放单选按钮,这个操作发生在检查单选时,但我不知道是如何
这里是普通jquery选项卡的其他示例的链接http://jqueryui.com/tabs/
文档指出,使用easytabs的唯一要求是包含a
元素的列表。我想api实际上并不需要a
元素,而是监听散列部分的url更改。您所能做的基本上是通过在单击单选按钮时手动设置url来模拟这种行为。
HTML
<ul id="tab-radio-buttons">
<li><input type="radio" data-href="tab-1" /></li>
<li><input type="radio" data-href="tab-2" /></li>
<li><input type="radio" data-href="tab-3" /></li>
</ul>
JS
$("#tab-radio-buttons input").click(function() {
window.location.hash = $(this).attr("data-href");
});
相关文章:
- 打开'选择文件'窗口单击锚链接(跳过单击'选择文件'按钮)
- 在我的Javascript和HTML之间的表单提交按钮链接中遇到问题
- 如何检查是否单击了链接按钮
- 如何将html表单与php链接,以便在例如单击按钮时返回true
- 允许用户从链接下载文件,如果他们选中“;同意条款”;框或单选按钮
- 在单选按钮表单选项上附加链接
- 单击按钮/链接后更改ng-include内的内容
- 从链接中选择单选按钮
- 通过jQuery将单选按钮转换为链接
- 带单选按钮的消防链接
- 根据选择的单选按钮更改按钮链接
- Javascript:尝试在新窗口中打开表单提交按钮,链接由单选按钮确定
- jQuery Mobile-Accordion中的链接和单选按钮不工作
- 当传递单选按钮值时,PHP重定向到另一页上的锚链接
- Codeigniter在单击按钮/链接时创建新的文本字段
- jquery选项卡使用选中的单选按钮而不是单击链接
- HTML/Javascript单选按钮表单,重定向到不同的链接
- 链接的动态单选按钮HTML Javascript
- 如何让我的js函数与锚链接/单选按钮工作
- 如何使用单击单选按钮更改链接的多个属性