使用jQuery在页面加载时打开特定的引导程序选项卡

时间：2018-11-23 06:54:54

标签： javascript jquery twitter-bootstrap-3 tabs

我尝试使用Bootstrap v.3在页面加载时打开一个jQuery标签。我尝试过

$('#activeTab3').addClass("active");

和

$('#activeTab3').tab('show')

为导航列表中的按钮着色，但是显示的内容属于第一个标签。

我也尝试过：

$("#mytabs").tabs({
  active: 1
});

但是我得到一个错误，即制表符不是函数。

$('#activeTab3').addClass("active");

//$('#activeTab3').tab('show')


/*
$("#mytabs").tabs({
  active: 1
});
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row mtop-2">
    <div class="col-md-12 col-xs-10">
      <ul class="nav nav-pills" role="tablist" id="mytabs">
        <li role="presentation" id="activeTab1"><a href="#tab1" aria-controls="home" role="tab" data-toggle="tab">tab1</a></li>
        <li role="presentation" id="activeTab2"><a href="#tab2" aria-controls="home" role="tab" data-toggle="tab">tab2</a></li>
        <li role="presentation" id="activeTab3"><a href="#tab3" aria-controls="home" role="tab" data-toggle="tab">tab3</a></li>
      </ul>

      <div class="tab-content">

        <div role="tabpanel" class="tab-pane active" id="tab1">
          <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                  <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseMachine1" aria-expanded="true" aria-controls="collapseMachine1">
                    <i class="fa fa-plus mright-1"></i> panel 1-1
                  </a>
                </h4>
              </div>
              <div id="collapseMachine1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseMachine1">
                <div class="panel-body">
                  <div class="row mtop-2">
                    .... panel 1-1
                  </div>
                </div>
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseMachine2" aria-expanded="false" aria-controls="collapseMachine2">
                    <i class="fa fa-edit mright-1"></i> panel 1-2
                  </a>
                </h4>
              </div>
              <div id="collapseMachine2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseMachine2">
                <div class="panel-body">
                  .... panel 1-3
                </div>
              </div>
            </div>
          </div>
        </div>

        <div role="tabpanel" class="tab-pane" id="tab2">
          <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                  <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseRobot1" aria-expanded="true" aria-controls="collapseRobot1">
                    <i class="fa fa-plus mright-1"></i> panel 2-1
                  </a>
                </h4>
              </div>
              <div id="collapseRobot1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseRobot1">
                <div class="panel-body">
                  panel 2-1
                </div>
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseRobot2" aria-expanded="false" aria-controls="collapseRobot2">
                    <i class="fa fa-edit mright-1"></i> panel 2-2
                  </a>
                </h4>
              </div>
              <div id="collapseRobot2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseRobot2">
                <div class="panel-body">
                  panel 2-2

                </div>
              </div>
            </div>
          </div>
        </div>

        <div role="tabpanel" class="tab-pane" id="tab3">
          <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                  <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseMould1" aria-expanded="true" aria-controls="collapseMould1">
                    <i class="fa fa-plus mright-1"></i> panel 3-1
                  </a>
                </h4>
              </div>
              <div id="collapseMould1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseMould1">
                <div class="panel-body">
                  panel 3-1
                </div>
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseMould2" aria-expanded="false" aria-controls="collapseMould2">
                    <i class="fa fa-edit mright-1"></i> panel 3-2
                  </a>
                </h4>
              </div>
              <div id="collapseMould2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseMould2">
                <div class="panel-body">
                  panel 3-2
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1 个答案:

答案 0 :(得分：1)

$(document).ready(function(){

$('#mytabs a[href="#tab3"]').tab('show') 

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row mtop-2">
    <div class="col-md-12 col-xs-10">
      <ul class="nav nav-pills" role="tablist" id="mytabs">
        <li role="presentation" ><a href="#tab1" aria-controls="home" role="tab" data-toggle="tab">tab1</a></li>
        <li role="presentation"><a href="#tab2" aria-controls="home" role="tab" data-toggle="tab">tab2</a></li>
        <li role="presentation"><a href="#tab3" aria-controls="home" role="tab" data-toggle="tab">tab3</a></li>
      </ul>

      <div class="tab-content">

        <div role="tabpanel" class="tab-pane active" id="tab1">
          <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                  <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseMachine1" aria-expanded="true" aria-controls="collapseMachine1">
                    <i class="fa fa-plus mright-1"></i> panel 1-1
                  </a>
                </h4>
              </div>
              <div id="collapseMachine1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseMachine1">
                <div class="panel-body">
                  <div class="row mtop-2">
                    .... panel 1-1
                  </div>
                </div>
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseMachine2" aria-expanded="false" aria-controls="collapseMachine2">
                    <i class="fa fa-edit mright-1"></i> panel 1-2
                  </a>
                </h4>
              </div>
              <div id="collapseMachine2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseMachine2">
                <div class="panel-body">
                  .... panel 1-3
                </div>
              </div>
            </div>
          </div>
        </div>

        <div role="tabpanel" class="tab-pane" id="tab2">
          <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                  <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseRobot1" aria-expanded="true" aria-controls="collapseRobot1">
                    <i class="fa fa-plus mright-1"></i> panel 2-1
                  </a>
                </h4>
              </div>
              <div id="collapseRobot1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseRobot1">
                <div class="panel-body">
                  panel 2-1
                </div>
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseRobot2" aria-expanded="false" aria-controls="collapseRobot2">
                    <i class="fa fa-edit mright-1"></i> panel 2-2
                  </a>
                </h4>
              </div>
              <div id="collapseRobot2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseRobot2">
                <div class="panel-body">
                  panel 2-2

                </div>
              </div>
            </div>
          </div>
        </div>

        <div role="tabpanel" class="tab-pane" id="tab3">
          <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                  <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseMould1" aria-expanded="true" aria-controls="collapseMould1">
                    <i class="fa fa-plus mright-1"></i> panel 3-1
                  </a>
                </h4>
              </div>
              <div id="collapseMould1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseMould1">
                <div class="panel-body">
                  panel 3-1
                </div>
              </div>
            </div>

            <div class="panel panel-default">
              <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                  <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseMould2" aria-expanded="false" aria-controls="collapseMould2">
                    <i class="fa fa-edit mright-1"></i> panel 3-2
                  </a>
                </h4>
              </div>
              <div id="collapseMould2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="collapseMould2">
                <div class="panel-body">
                  panel 3-2
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

使用$('#mytabs a[href="#tab3"]').tab('show')通过标签css id和href css id来选择标签。

相关问题
最新问题