切换到选择的选项卡的名字在jQuery的UI选项卡

如果我有三个标签：切换到选择的选项卡的名字在jQuery的UI选项卡

<div id="tabs"> 
    <ul> 
     <li><a href="#sample-tab-1"><span>One</span></a></li> 
     <li><a href="#sample-tab-2"><span>Two</span></a></li> 
     <li><a href="#sample-tab-3"><span>Three</span></a></li> 
    </ul> 
</div>

我想通过它的名字交换到＃样品标签-2。我知道我可以切换到一个标签，如果我知道它是数字，但在我遇到的情况下我不会知道这一点。

注：JQuery的1.3.1/jQuery的UI 1.6rc6

来源

2009-02-23 Rob

所以，你要选择标签“三化”无论身在何处它是？为什么你知道'三'这个词，但不知道ID或号码？如果你翻译过你的网站，这种方法可能会有问题...你能解决这个问题吗？ – 2009-02-23 17:27:42

当然，我想要做的是在这里描述：http://stackoverflow.com/questions/572376/changing-the-hash-but-not-moving-the-page-using-jquery-ui-tabs方法我现在想要改变哈希以追加一个字符到哈希名称，然后在页面加载时选择该选项卡（没有字符） – Rob 2009-02-23 17:41:40

基本上会设置window.location为＃sample-tab-1，然后当页面加载时（index.php＃sample-tab-1）切换到＃_sample-tab-1 – Rob 2009-02-23 17:43:52

我无法得到以前的答案。我做了以下按名称来获取标签的指标：

var index = $('#tabs a[href="#simple-tab-2"]').parent().index(); 
$('#tabs').tabs('select', index);

来源

2011-01-10 11:04:01

可以按名称与下面的脚本得到选项卡的索引：

var index = $('#tabs ul').index($('#simple-tab-2')); 
$('#tabs ul').tabs('select', index);

来源

2009-02-23 16:52:49 bdukes

如果您正在改变的HREFs，你可以为链接<a href="#sample-tab-1" id="tab1"><span>One</span></a>分配一个ID，以便您可以通过它的ID找到标签索引。

来源

2009-07-06 15:46:11 kiev

获取标签页从零开始索引的唯一实用方法是逐个浏览制作tabset（LI> A s）并匹配其内部文本的每个元素。它可能可以用更清晰的方式完成，但这是我如何做到的。

$('#tabs ul li a').each(function(i) { 
    if (this.text == 'Two') {$('#reqTab').val(i)} 
}); 

$("#tabs").tabs({ 
    selected: $('#reqTab').val() 
});

你可以看到，我用了一个隐藏<输入ID =“reqTab” >场的页面，以确保该变量的一个函数移动到另一个。

注意：有一点小问题 - 在激活tabset之后选择标签看起来并不像jQuery UI 1.8中公布的那样工作，这就是为什么我从第一遍中按顺序使用已标识的索引以选择所需的选项卡来初始化标签集。

来源

2010-05-01 03:31:19 Wes

@ bduke的回答居然有轻微的调整工作。

var index = $("#tabs>div").index($("#simple-tab-2")); 
$("#tabs").tabs("select", index);

以上假设类似于：

<div id="tabs"> 
    <ul> 
    <li><a href="#simple-tab-0">Tab 0</a></li> 
    <li><a href="#simple-tab-1">Tab 1</a></li> 
    <li><a href="#simple-tab-2">Tab 2</a></li> 
    <li><a href="#simple-tab-3">Tab 3</a></li> 
    </ul> 
    <div id="simple-tab-0"></div> 
    <div id="simple-tab-1"></div> 
    <div id="simple-tab-2"></div> 
    <div id="simple-tab-3"></div> 
</div>

jQueryUI的现在支持调用“中选择”使用标签的ID/HREF选择，但构建标签时，在“选择”选项仍然只支持数字索引。

我的投票去bdukes让我走上正确的轨道。谢谢！

来源

2011-10-24 19:53:41 cautionbug

使用此功能：

function uiTabs(i){ 
    $("#tabs").tabs("option", "selected", i); 
}

而且使用下面的代码标签之间切换：

<a onclick="uiTabs(0)">Tab 1</a> 
<a onclick="uiTabs(1)">Tab 2</a> 
<a onclick="uiTabs(2)">Tab 3</a>

来源

2011-12-09 15:58:12 Hamidreza

下面一块为我工作

$($("#tabs")[0]).tabs({selected: 1});

希望，这有助于！

来源

2012-01-19 11:01:58 Sandeep

以下是通过名称获取选定选项卡的示例代码。我希望这有助于你找到ypur解决方案：

<html> 
<head> 
<script type="text/javascript"><!-- Don't forget jquery and jquery ui .js files--></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#tabs').show(); 

    // shows the index and tab title selected 
    $('#button-id').button().click(function(){ 
     var selTab = $('#tabs .ui-tabs-selected'); 
     alert('tab-selected: '+selTab.index()+'-'+ selTab.text()); 
    }); 
    }); 
</script> 
</head> 
<body> 
    <div id="tabs"> 
     <ul id="tablist"> 
      <li><a href='forms/form1.html' title="form_1"><span>Form 1</span></a></li> 
      <li><a href='forms/form2' title="form_2"><span>Form 2</span></a></li> 
     </ul> 
    </div> 
    <button id="button-id">ClickMe</button> 
</body> 
</html>

来源

2012-03-23 16:26:30 Vikram

看来，使用id工程，以及为指标，例如简单地做这将工作开箱...

$("#tabs").tabs("select", "#sample-tab-1");

这是有据可查的official docs：

“选择一个选项卡，就好像它是点击第二个参数是。要选择或面板的标签相关联的ID选择的标签的基于零的索引（标签的href片段标识符，例如散列，指向面板的id）。“

我认为这是在问这个问题后被添加并可能在大多数答案后

来源

2012-04-08 16:17:38

只有这个代码真正有用！

$('#tabs').tabs(); 
$('#tabs').tabs('select', '#sample-tab-2');

来源

2012-04-21 20:24:34 xmoonlight

$('#tabs').tabs('select', index);

方法` '选择' 是不是在jQuery UI的1.10.0支持。 http://api.jqueryui.com/tabs/

我用这个代码，并正常工作：

$('#tabs').tabs({ active: index });

来源

2013-02-14 16:42:49

试试这个： “选择”/ “活动” 选项卡

<article id="gtabs"> 
    <ul> 
     <li><a href="#syscfg" id="tab-sys-cfg" class="tabtext">tab One</a></li> 
     <li><a href="#ebsconf" id="tab-ebs-trans" class="tabtext">tab Two</a></li> 
     <li><a href="#genconfig" id="tab-general-filter-config" class="tabtext">tab Three</a></li> 
    </ul>

var index = $('#gtabs a[href="#general-filter-config"]').parent().index();

//'”选择'不支持在jQuery UI版本1.10.0

$('#gtabs').tabs('select', index);

另一种解决方法：使用“主动”：

$('#gtabs').tabs({ active: index });

来源

2014-03-26 17:24:01

我有麻烦得到任何答案，因为他们是基于旧版本的JQuery用户界面的工作。我们使用1.11.4（CDN Reference）。

这里是我的拨弄工作代码：http://jsfiddle.net/6b0p02um/ 我结束了拼接在一起，从四个或五个不同的线程位来得到我的工作：

$("#tabs").tabs(); 

    //selects the tab index of the <li> relative to the div it is contained within 
    $(".btn_tab3").click(function() { 
     $("#tabs").tabs("option", "active", 2); 
    });   

    //selects the tab by id of the <li> 
    $(".btn_tab3_id").click(function() { 
     function selectTab(tabName) { 
      $("#tabs").tabs("option", "active", $(tabName + "").index()); 
     } 

     selectTab("#li_ui_id_3"); 
    });

来源

2017-09-26 22:09:32

切换到选择的选项卡的名字在jQuery的UI选项卡

回答

相关问题