Question

首先抱歉我的英语不好。我有以下代码Bootstrap 3，但无法正常工作。如果您尝试更改，则导航选项卡有时会停止使用某些选项卡。我需要帮助来纠正错误。代码应该以这种方式工作，您有一个导航菜单，并且还必须能够从菜单激活相同外部链接的选项卡。由于具有选项卡式菜单和子菜单具有相同的选项卡。从非常感谢你!!!

    <nav id="menu" class="col-sm-9" role="navigation">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">HOTEL</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">SERVICIOS <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#tab2" data-toggle="tab">BAR</a></li>
        <li><a href="#tab3" data-toggle="tab">DESAYUNO</a></li>
        <li><a href="#tab4" data-toggle="tab">/CELÍACO Y <br> DIABÉTICO</a></li>
        <li><a href="#tab5" data-toggle="tab">WIFI</a></li>
        <li><a href="#tab6" data-toggle="tab">DESCUENTO <br> A VIAJANTE</a></li>
        <li><a href="#tab7" data-toggle="tab">SECTOR <br> FUMADORES</a></li>
        <li><a href="#tab8" data-toggle="tab">COCHERAS <br> CERRADAS</a></li>
        <li><a href="#tab9" data-toggle="tab">PISCINA</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">HABITACIONES <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#tab10" data-toggle="tab">SINGLE</a></li>
        <li><a href="#tab11" data-toggle="tab">CAPACIDADES <br> ESPECIALES</a></li>
        <li><a href="#tab12" data-toggle="tab">DOBLES</a></li>
        <li><a href="#tab13" data-toggle="tab">SUIT</a></li>
      </ul>
    </li>
    <li><a href="#tab14" data-toggle="tab">GALERÍA</a></li>
    <li><a href="#tab15" data-toggle="tab">CONTACTO</a></li>
  </ul>
</nav>
<div class="container">
  <div class="row">
    <div class="col-sm-12 tab-content">

      <!-- *****************     HOTEL     ***************** -->

      <div id="tab1" class="tab-pane fade in active">
        <p>tab1</p>
      </div>

      <!-- *****************     SERVICIOS     ***************** -->

      <div id="tab2" class="tab-pane fade">
        <p>tab2</p>
      </div>

      <div id="tab3" class="tab-pane fade">
        <p>tab3</p>
      </div>

      <div id="tab4" class="tab-pane fade">
        <p>tab4</p>
      </div>

      <div id="tab5" class="tab-pane fade">
        <p>tab5</p>
      </div>

      <div id="tab6" class="tab-pane fade">
        <p>tab6</p>
      </div>

      <div id="tab7" class="tab-pane fade">
        <p>tab7</p>
      </div>

      <div id="tab8" class="tab-pane fade">
        <p>tab8</p>
      </div>

      <div id="tab9" class="tab-pane fade">
        <p>tab9</p>
      </div>

      <!-- *****************     HABITACIONES     ***************** -->

      <div id="tab10" class="tab-pane fade">
        <p>tab10</p>
      </div>

      <div id="tab11" class="tab-pane fade">
        <p>tab11</p>
      </div>

      <div id="tab12" class="tab-pane fade">
        <p>tab12</p>
      </div>

      <div id="tab13" class="tab-pane fade">
        <p>tab13</p>
      </div>

      <!-- *****************     GALERIA     ***************** -->

      <div id="tab14" class="tab-pane fade">
        <p>tab14</p>
      </div>

      <!-- *****************     CONTACTO     ***************** -->

      <div id="tab15" class="tab-pane fade">
        <p>tab15</p>
      </div>

    </div>
  </div>
  <!-- end row -->
</div>
<!-- end container -->
<ul class="line">
  <li><a href="#tab2" data-toggle="tab">BAR</a></li>
  <li><a href="#tab3" data-toggle="tab">DESAYUNO</a></li>
  <li><a href="#tab4" data-toggle="tab">/CELÍACO Y DIABÉTICO</a></li>
  <li><a href="#tab5" data-toggle="tab">WIFI</a></li>
</ul>
<ul>
  <li><a href="#tab6" data-toggle="tab">DESCUENTO A VIAJANTE</a></li>
  <li><a href="#tab7" data-toggle="tab">SECTOR FUMADORES</a></li>
  <li><a href="#tab8" data-toggle="tab">COCHERA CERRADA</a></li>
  <li><a href="#tab9" data-toggle="tab">PISCINA</a></li>
</ul>
<ul>
  <li><a href="#tab10" data-toggle="tab">SINGLE</a></li>
  <li><a href="#tab11" data-toggle="tab">CAPACIDADES ESPECIALES</a></li>
  <li><a href="#tab12" data-toggle="tab">DOBLES</a></li>
  <li><a href="#tab13" data-toggle="tab">SUIT</a></li>
</ul>

JAVASCRIPT：

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
  var target = this.href.split('#');
  $('.nav a').filter('a[href="#' + target[1] + '"]').tab('show');
})

带有外部链接bootstrap的活动选项卡3

0 个答案: