按钮打开特定的手风琴选项卡

时间:2016-11-24 10:31:51

标签: javascript tabs accordion jquery-ui-accordion

我正在尝试创建一个打开特定手风琴标签的按钮或链接,这是我的手风琴结构:

  <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 个答案:

答案 0 :(得分:2)

你可以使用

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

用于tab2和

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

for 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