javascript - 从子菜单项打开选项卡内容

Question

(这里绝对是初学者...)我在使用 Twitter Bootstrap 构建的单页网站中有一个带有子菜单的顶级菜单。我希望滚动到子菜单项，并在单击时打开特定选项卡内容，但我似乎无法弄明白。

我的代码是这样的:

导航:

<li><a href="#Section-1">Compa&ntilde;&iacute;a</a></li>
          <li class="dropdown"><a href="#Section-2" class="dropdown-toggle js-activated" data-toggle="dropdown" data-hover="dropdown">Dise&ntilde;o <b class="caret"></b></a>
              <ul class="dropdown-menu">
                                       <li><a href="#tab1">Diseño de marcas</a></li>
                                       <li><a href="#tab2">Diseño editorial</a></li>
              </ul>
          </li>

选项卡:

    <div class="row-fluid">
        <div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Seccion 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Seccion 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>
<img src="images/thumbnails/carteleria/16.jpg" height="160px" width="110px" style="float: left;margin-right: 10px"/>Con talleres propios realizamos carteleria metal&uacute;rgica de distintos formatos. Con la posibilidad de plegados de chapa, corte a plasma o laser, soldadura y el armado y articulaci&oacute;n de los materiales, no tenemos limites para la construcci&oacute;n de carteleria. Traiga su idea o necesidad y nosotros lo construimos.</p>

    </div>
    <div class="tab-pane" id="tab2">
      <p class="justify">
Decoramos flotas de veh&iacute;culos, a la vez que realizamos los planos de molderia especifica para cada veh&iacute;culo. Por la realizaci&oacute;n "in house" de todos los elementos, as&iacute; como de nuestro grupo de instaladores expertos, nos colocan en un lugar inigualable en el mercado, por la calidad de elementos, y capacidad de respuesta para flotas de muchas unidades.</p>

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

任何帮助将不胜感激!提前致谢...

Answer 1

将 data-toggle="tab" 属性添加到您的链接:

<ul class="dropdown-menu">
    <li><a data-toggle="tab" href="#tab1">Diseño de marcas</a></li>
    <li><a data-toggle="tab" href="#tab2">Diseño editorial</a></li>
</ul>