Question

My page's content is divided into four different tabs on the page. I need to link an tag on the first tab to go to the second tab, plus have it expand one of the tables that's hidden by default. Is there a way to do this with javascript or jQuery? I have it linked so it goes to the second tab already (mind you, it's all within the same page, not an actual browser tab):

<a href="#registered-partners" onclick="$('#tab2').click();">Registered</a>

I'm a noob with Javascript and jQuery so any help is great!

Answer 1

我使用了jquery ui标签。单击第一页上的链接，它将打开第二个选项卡并取消隐藏表。点击运行代码段按钮。

＆＃13;

$( function() {
    $( "#tabs" ).tabs();
   
    $('#openTab2').click(function(){
       $( "#tabs" ).tabs( "option", "active", 1 );
       $("#mytable").fadeIn('slow');
    })
  } );

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">One</a></li>
    <li><a href="#tabs-2">Two</a></li>
    <li><a href="#tabs-3">Three</a></li>
    <li><a href="#tabs-4">Four</a></li>
  </ul>
  <div id="tabs-1">
    <p>Tab 1</p>
    <p>
       <a href="#" id="openTab2">Open Tab 2</a>
    </p>
  </div>
  <div id="tabs-2">
    <p>Tab 2</p>
    <table class="table" id="mytable" style="display: none;">
    <thead><tr><th>One</th><th>Two</th></tr></thead>
    <tbody><tr><td>Three</th><td>Four</td></tr></tbody>
</table>
  </div>
  <div id="tabs-3">
    <p>Tab 3</p>   
  </div>
   <div id="tabs-4">
    <p>Tab 4</p>   
  </div>
</div>

＆＃13;

<a> tag linking to new tab section on page plus expanding a div

1 个答案: