脚本代码

Question

我正在使用Easy Responsive选项卡LINK ..这里第一个选项卡在页面加载时处于活动状态..但我想将我的活动选项卡更改为除第一个选项卡以外的其他选项..我有以下代码：< / p>

HTML ：

<div id="demoTab">          
        <ul class="resp-tabs-list">
            <li> .... </li>
            <li> .... </li>
            <li> .... </li>
        </ul> 

        <div class="resp-tabs-container">                                                        
            <div> ....... </div>
            <div> ....... </div>
            <div> ....... </div>
        </div>
    </div>

这是我的 demo 页面。我想将激活的顺序更改为第二个选项卡。是可以的吗？

Answer 1

可能不是这样做的正确方法。我只需点击该标签即可。

$('h2[aria-controls="tab_item-1"]').click();

演示：http://jsfiddle.net/HZ3F4/2/

Answer 2

你可以像这样动态地做到这一点

<ul class="resp-tabs-list">
  <li><a href="#tab1">Responsive Tab-1</a></li>
  <li><a href="#tab2">Responsive Tab-2</a></li>
  <li><a href="#tab3">Responsive Tab-3</a></li>
</ul>

然后我们需要从url获取哈希并应用正确的类：

<强>的JavaScript

var hash = '#tab1',
    lis = $("ul.resp-tabs-list > li");
lis.removeClass("resp-tab-active");
$("a[href='" + hash + "']").addClass("resp-tab-active");

Js演示： http://jsfiddle.net/HZ3F4/5/

Answer 3

在初始化响应选项卡后放置在功能下方。

setTimeout( "$('ul.resp-tabs-list li:nth-child(2)').trigger('click');",200 );

你也可以使用这个简单的标签脚本，而不是使用垃圾脚本。

见这里：http://simple-jquery-responsive-tab.blogspot.in/

Answer 4

Easy Responsive Tabs插件在“标签短代码”功能生成的源代码中有一个参数。在以下代码中，只需将“active”标志从第一个选项卡移动到所需选项卡：

[restabs ....]
[restab title="TAB 1" active="active"]Content of tab 1[/restab]
[restab title="TAB 2"]Content of tab 2[/restab]
[restab title="TAB 3"]Content of tab 3[/restab]
[restab title="TAB 4"]Content of tab 4[/restab]
[/restabs]

我知道这个帖子已经过时了，但我的回答可能对某人有帮助。

Answer 5

$("ul.resp-tabs-list > li").removeClass("resp-tab-active");     
$("div.resp-tabs-container > h2").removeClass("resp-tab-active");     
$("div.resp-tabs-container > div").removeClass("resp-tab-content-active");    
$("div.resp-tabs-container > div").hide();
$('ul.resp-tabs-list > li[aria-controls="tab_item-2"]').addClass("resp-tab-active");     
$('div.resp-tabs-container > h2[aria-controls="tab_item-2"]').addClass("resp-tab-active");     
$('div.resp-tabs-container > div[aria-labelledby="tab_item-2"]').addClass("resp-tab-content-active");    
$('div.resp-tabs-container > div[aria-labelledby="tab_item-2"]').show();

Answer 6

Html代码

<ul class="resp-tabs-list">
 <li><a href="#tab1">Responsive Tab-1</a></li>
 <li><a href="#tab2">Responsive Tab-2</a></li>
 <li><a href="#tab3">Responsive Tab-3</a></li>
</ul>

脚本代码

$(document).ready(function () {  
   var slug = '#tab2'; 
   setTimeout( "$('"+slug+"').trigger('click');",50 );
});

轻松响应标签自定义标签激活

6 个答案:

Html代码

脚本代码