2016-11-24 68 views
0

我试图创建打开一个特定的手风琴选项卡按钮或链接,这里是我的手风琴结构:按钮,打开特定的手风琴标签

<div class="tabs"> 
    <div class="tabs-header"> 
    <div class="border"></div> 

    <ul> 
    <li class="active"><a href="#tab-1" tab-id="1">Home</a></li> 

    LINK HERE to open Tab 2 
    LINK HERE to open Tab 3 


    <li><a href="#tab-2" tab-id="2">Symptom Checker</a></li> 


    <li><a href="#tab-3" tab-id="3">Locator</a></li> 
    </ul> 

    </div> 
    <div class="tabs-content"> 
    <div tab-id="1" class="tab active"></div> 
    <div tab-id="2" class="tab"></div> 
    <div tab-id="3" class="tab"></div> 
    </div> 

我猜会有一个onclick事件我可以申请一个按钮?我已经试过:

<a href="#tab-2" tab-id="2">Symptom Checker </a> 

,但什么也没有发生其他不是更新网址

回答

1

可以使用

$('your_button').on('click',function(){ $("#accordion").accordion("option", "active", 1); });

为TAB2和

$('your_button').on('click',$("#accordion").accordion("option", "active", 2);})

为TAB3

,或者您可以使用的onclick属性

<a onclick="$('#accordion').accordion('option', 'active', 1)">Click here for tab2</a>

See a working demo here.

http://api.jqueryui.com/accordion/#option-active

+0

非常感谢您的回复 - 不幸的是,当我按一下按钮没有任何反应,当我点击链接我没有再次发生,并得到以下错误@ .accordion不是一个函数(...) – itguyme

+0

修复它...必须调整javascript: 'code' function changeTab1(){0} {0} {0}} var getTabId = $('。tabs-header .active a')。attr('tab-id'); $('。tab')。stop()。fadeOut(300,function(){ //删除类 $(this).removeClass('active'); })。hide(); $(this.addClass('active'))($。'tab [tab-id ='+ 2 +']')。stop()。fadeIn(300,function(){ //添加类别 $(this).addClass('active') ; animateTabHeight(); }); }'code' – itguyme

+0

你用好手风琴的jquery ui吗?因为我只是接管了文档中找到的功能,我试了一下,它工作 –