如何使用javascript和jquery以编程方式从主选项卡切换到辅助选项卡

时间:2018-10-31 13:22:11

标签: javascript jquery

我想使用jQuery和JavaScript从主选项卡切换到辅助选项卡。 例如,我有2个主要标签A和B。我在标签B中有2个次级标签C和D。单击事件后,我想从标签A切换到标签D。我该怎么办?

1 个答案:

答案 0 :(得分:0)

我相信您的html看起来像这样

<div class="tabs">
        <ul>
            <li><a href="#tabs-1">tab Adunt</a></li>
            <li><a href="#tabs-2">tab B</a></li>
            <li><a href="#tabs-3">Tab C</a></li>
        </ul>
        <div id="tabs-1">

            <button onClientClick="openChaild()">
                Open chaild tab
            </button>

        </div>
        <div id="tabs-2">
            <p>tab 2</p>
        </div>
        <div id="tabs-3">

            <div class="Innertabs">
                <ul>
                    <li><a href="#tabs-1">Chaild tab a</a></li>
                    <li><a href="#tabs-2">Chaild tab B</a></li>
                    <li><a href="#tabs-3">Chaild tab C</a></li>
                </ul>
                <div id="tabs-1">
                    <p>sub tab 1</p>
                </div>
                <div id="tabs-2">
                    <p>sub tab 2.</p>
                </div>
                <div id="tabs-3">
                    <p>sub tab 3</p>
                </div>
            </div>



        </div>
    </div>

您实现了

之类的目标
 $( function() {
    $( ".tabs" ).tabs();
     $( ".Innertabs" ).tabs();



  } );

  function openChaild()
  {
         $(".tabs" ).tabs( { active: 2 } );
      $(".Innertabs" ).tabs( { active: 1 } );
  }

如果这对您有用,请标记为答案。