He estado tratando de implementar la pestaña en una de mis páginas. El código es el siguiente.

<div class="row justify-content-between">
    <div class="col-lg-3">
        <a class="nav-link p-3 mb-2 sidebar-link justify-content-between text-success ml-4" href="#1" data-toggle="tab">
            <h4 class="text-success size">Vehicles</h4>
        </a>
        <a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#2" data-toggle="tab">
            <h4 class="text-success size">Battery</h4>
        </a>
        <a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#3" data-toggle="tab">
            <h4 class="text-success size">Charging</h4>
        </a>
    </div>

    <div class="tab-content  col-lg-9">
        <div class="tab-pane active" id="1">
            <!-- Content here -->
        </div>

        <div class="tab-pane" id="2">
            <!-- content here -->
        </div>

        <div class="tab-pane" id="3">
            <!-- content here -->
        </div>
    </div>
</div>

Lo que hice es crear dos columnas, una que contiene los enlaces y la otra que contiene la región donde se deben mostrar los datos de acuerdo con el enlace en el que se hizo clic. Cuando se ejecuta, el código realmente funciona por una vez, es decir, cuando se hace clic en los enlaces por primera vez, muestra el contenido respectivo a la derecha. Pero cuando intento acceder a otro enlace, no funciona. Funciona solo una vez. ¿Qué debo hacer para que funcionen, sin importar cuántas veces quiera alternar entre datos?

0
Abhishek Ghadge 29 abr. 2020 a las 14:08

2 respuestas

La mejor respuesta

No agregaste el contenedor de la lista 'nav nav-tabs' para tus nav-tabs. En este momento todos sus enlaces funcionan como un enlace interno independiente. Por lo tanto, funciona con solo un clic.

Aquí está el código de actualización


<div class="row justify-content-between">
    <div class="col-lg-3">
<ul class="nav nav-tabs">
        <li class="active"><a class="nav-link p-3 mb-2 sidebar-link justify-content-between text-success ml-4" href="#1" data-toggle="tab">
            <h4 class="text-success size">Vehicles</h4>
        </a>
</li>

<li>
        <a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#2" data-toggle="tab">
            <h4 class="text-success size">Battery</h4>
        </a>
</li>
<li>
        <a class="nav-link p-3 mb-2 sidebar-link justify-content-between ml-4" href="#3" data-toggle="tab">
            <h4 class="text-success size">Charging</h4>
        </a>
</li>
    </div>

    <div class="tab-content  col-lg-9">
        <div class="tab-pane fade in active" id="1">
            <!-- Content here -->
        </div>

        <div class="tab-pane fade" id="2">
            <!-- content here -->
        </div>

        <div class="tab-pane fade" id="3">
            <!-- content here -->
        </div>
    </div>
</div>


Avíseme si cumple con sus requisitos.

1
Pranay kumar 29 abr. 2020 a las 11:32
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>




<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <nav>
        <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
          <a class="nav-item nav-link active " role="tab" aria-selected="true" href="#1" data-toggle="tab">
            <h4 class="text-success size">Vehicles</h4>
          </a>
          <a class="nav-item nav-link " href="#2" role="tab" aria-selected="false" data-toggle="tab">
            <h4 class="text-success size">Battery</h4>
          </a>
          <a class="nav-item nav-link " href="#3" role="tab" aria-selected="false" data-toggle="tab">
            <h4 class="text-success size">Charging</h4>
          </a>
        </div>
      </nav>
  <div class="tab-content">
        <div class="tab-pane active" id="1">
          <!-- Content here -->
          <h1>Hello</h1>
        </div>
        <div class="tab-pane" id="2">
          <!-- content here -->
          <h1>hi</h1>
        </div>
        <div class="tab-pane" id="3">
          <!-- content here -->
          <h1>why</h1>
        </div>
      </div>
    </div>
  </div>
</div>

Verifique esta solución, espero que funcione para usted.

1
Arjun 29 abr. 2020 a las 11:45