javascript - 使用单选按钮而不是链接单击的 jquery 选项卡

Question

我想做 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

我想制作这样的标签，而不是在点击标签链接时发生 Action 我想放置单选按钮并且这个 Action 在 radio 检查时发生但我不知道如何

这里是普通 jquery 选项卡的其他示例的链接 http://jqueryui.com/tabs/

Answer 1

文档指出使用 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");
});