Question

我正在尝试从 a href 链接到jQuery标签，但它似乎无法正常工作。你是如何做到这一点的。我想在用户点击链接时打开标签页。这是我到目前为止的代码：http://jsfiddle.net/AXEEe/。

HTML

<a href="#Allocated">Allocated</a>
<a href="#Declined">Declined</a>
<a href="#Pending">Pending</a>
<a href="#Failed">Failed</a>

<div style="padding-top: 10px">
  <div id="tabs">
    <ul>
      <li><a href="#Allocated" id="#Allocated">Allocated Requests</a></li>
      <li><a href="#Declined">Declined Requests</a></li>
      <li><a href="#Pending">Pending Requests</a></li>
      <li><a href="#Failed">Failed Requests</a></li>
      </ul>
          <div id="Allocated">
              Content 1
          </div>
          <div id="Declined">
              Content 2
          </div>
          <div id="Pending">
              Content 3
          </div>    
          <div id="Failed">
              Content 4
          </div>
        </div>
</div>

JS

$(function() {
        $( "#tabs" ).tabs();
});

Answer 1

要选择包含链接的标签，请执行以下操作：http://jsfiddle.net/AXEEe/1/

<a id="0" href="#">Allocated</a>
<a id="1" href="#">Declined</a>
<a id="2" href="#">Pending</a>
<a id="3" href="#">Failed</a>

    $('a').click(function(){
       $("#tabs").tabs("option", "active", parseInt(this.id));
    });

对于此示例，我刚刚使用标签链接将id添加到您的<a>链接。你可以做得更好。到你的项目。询问你是否有更多问题

修改

更新标签部分方法以符合JQUery UI 1.9

Answer 2

$(function() {
    $("#tabs").tabs();
    $("a[href=#Allocated]").click(function() {
        $("#tabs").tabs("option", "active", 0);
    });
    $("a[href=#Declined]").click(function() {
        $("#tabs").tabs("option", "active", 1);
    });
    $("a[href=#Pending]").click(function() {
        $("#tabs").tabs("option", "active", 2);
    });
    $("a[href=#Failed]").click(function() {
        $("#tabs").tabs("option", "active", 3);
    });
});

FIDDLE

链接到href的jQuery选项卡

2 个答案: