Question

我在网上看过很多线索，但似乎都没有提供可行的解决方案。我只是尝试使用外部href

在Jquery UI选项卡小部件中切换不同的选项卡

我觉得我最接近这个问题的是这个解决方案，粘贴在下面，这似乎不起作用：

<script>
$(document).ready(function(){
    $('#tabs2').tabs();

    $('.open-tab').click(function(event) {
        var tab = $(this).attr('href');
        $('#tabs2').tabs('select', tab);
  });
 });


  </script>

<div id="tabs2">


          <ul>
                    <li><a href="#tabs2-1">Tab header 1</a></li>
                    <li><a href="#tabs2-2">Tab header 2</a></li>
                    <li><a href="#tabs2-3">Tab header 3</a></li>
                    <li><a href="#tabs2-4">Tab header 4</a></li>
                    <li><a href="#tabs2-5">Tab header 5</a></li>
          </ul>


  <div id="tabs2-1">
  Tab Content 1
  </div>
  <div id="tabs2-2">
  Tab Content 2
  </div>
  <div id="tabs2-3">
  Tab content 3

  </div>
  </div>

我想用外部href加载标签的原因是因为我将从大卫lynch maphilight实用程序加载标签。这种链接的一个例子如下：

 <area class="EU"  shape="poly" title="France" href="#tabs2-1"  coords="353,108,345,107,345,104,347,100,345,96,342,94,339,92,339,91,345,91,345,89,348,90,351,88,353,85,359,88,366,91,366,92,362,97,363,99,362,99,365,103,362,106,358,105,354,106,353,108">

正如你从上面所看到的，href为你提供了链接的ID，所以我不想要一个索引的解决方案......任何帮助都会非常感激，因为我慢慢地但是肯定会开始失去理智而我我想我已经打破了回车键:-)提前谢谢！

Jsfiddle：http://jsfiddle.net/Guill84/spyt9/

Answer 1

我操纵你的小提琴，它很有效。 updated fiddle

我刚刚使用return false：

$(document).ready(function(){
    $('#tabs2').tabs();

    $('.open-tab').click(function(event) {
        var tab = $(this).attr('href');
        $('#tabs2').tabs('select', tab);
        return false;
  });
 });

修改：你的HTML代码是错误的，你应该使用jQuery中的选择器进行链接，它的工作原理是： <a href="#tabs2-1" class="open-tab">TEST 1</a> 试一试：http://jsfiddle.net/spyt9/4/

从maphilight href加载Jquery选项卡

1 个答案: