Bootstrap Plugin de pestañas (Tab)

Las pestañas (Tab) en elcapítulo de elementos de navegación de Bootstrapse presentaron en un capítulo.

Si desea hacer referencia a las funciones de este complemento por separado, debe incluirtab.js. O, como se mencionó enla descripción general de los complementos de Bootstrapen el capítulo, puede incluirbootstrap.jso la versión comprimida debootstrap.min.js。

Uso

Puede habilitar las pestañas de las siguientes dos maneras:

• Mediante el atributo data: debe agregardata-toggle="tab"odata-toggle="pill"al enlace de texto ancla.

  Agreguenavynav-tabsla clase auly se aplicarán los estilos de Bootstrapde pestañas., agreguenavynav-pillsla clase auly se aplicarán los estilos de Bootstrapde píldoras (pill).。

  <ul class="nav nav-tabs">
      <li><a href="../index.html" data-toggle="tab">Home</a></li>
      ...
  </ul>
  

• Mediante JavaScript: puede usar JavaScript para habilitar las pestañas, como se muestra a continuación:

  $('#myTab a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
  })
  

  El siguiente ejemplo demuestra diferentes formas de activar cada pestaña:

  // 通过名称选取标签页
  $('#myTab a[href="../index.html"]').tab('show')
  
  // 选取第一个标签页
  $('#myTab a:first').tab('show')
  
  // 选取最后一个标签页
  $('#myTab a:last').tab('show')
  
  // 选取第三个标签页（从 0 开始索引）
  $('#myTab li:eq(2) a').tab('show')
  

Efecto de desvanecimiento (fade)

Si necesita establecer un efecto de desvanecimiento para las pestañas, agregue.fadea cada.tab-panedespués de. La primera pestaña debe agregar.inclase, para mostrar el contenido inicial con un efecto de fade-in, como se muestra en el siguiente ejemplo:

<div class="tab-content">
    <div class="tab-pane fade in active" id="home">...</div>
    <div class="tab-pane fade" id="svn">...</div>
    <div class="tab-pane fade" id="ios">...</div>
    <div class="tab-pane fade" id="java">...</div>
</div>

Ejemplo

El siguiente ejemplo demuestra el uso del plugin de pestañas (Tab) con el atributo data y su efecto de desvanecimiento:

El resultado se muestra a continuación:

Métodos

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="../index.html" data-toggle="tab">Home</a></li>
    .....
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    .....
</div>
<script>
    $(function () {
        $('#myTab a:last').tab('show')
    })
</script>

Ejemplo

El siguiente ejemplo demuestra el método del plugin de pestañas (Tab).taby su uso. En este ejemplo, la segunda pestañaiOSestá activa:

El resultado se muestra a continuación:

Eventos

La siguiente tabla enumera los eventos utilizados en el plugin de pestañas (Tab). Estos eventos se pueden usar como ganchos (hooks) en funciones.

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})

Ejemplo

El siguiente ejemplo demuestra el uso de los eventos del plugin de pestañas (Tab). En este ejemplo, se mostrarán la pestaña actual y la anteriormente visitada:

El resultado se muestra a continuación: