it-roy-ru.com

Как изменить активную вкладку начальной загрузки с помощью JavaScript

Я пытался изменить активную вкладку и не смог правильно использовать элемент javascript onclick. Вот код:

<ul class="nav nav-tabs" style="text-align: left;">
    <li class="active"><a href="#first" data-toggle="tab">First</a></li>
    <li><a href="#second" data-toggle="tab">Second</a></li>
    <li><a href="#third" data-toggle="tab">Third</a></li>
</ul>

<div class=“tab-content">

<div id="first" class="tab-pane fade in active”>
Text

<a href="#second" class="btn btn-primary btn-lg" onclick=“CHANGE ACTIVE TAB TO SECOND” data-toggle="tab">Second</a>

<a href="#third" class="btn btn-primary btn-lg" onclick=“CHANGE ACTIVE TAB TO THIRD” data-toggle=“tab">Third</a>

</div>


<div id="second" class="tab-pane fade in”>
Text
</div>


<div id="third" class="tab-pane fade in”>
Text
</div>


</div>

Как можно использовать кнопки, чтобы изменить активную вкладку на связанный с ней идентификатор? Пожалуйста, порекомендуйте.

Хорошего дня!

9
beamerfan

Вы можете нажать на вкладку, которую вы хотите, когда нажимаете на кнопки

<ul class="nav nav-tabs" style="text-align: left;">
    <li class="active"><a href="#first" data-toggle="tab" id="first_tab">First</a></li>
    <li><a href="#second" data-toggle="tab" id="second_tab">Second</a></li>
    <li><a href="#third" data-toggle="tab" id="third_tab">Third</a></li>
</ul>

<div class="tab-content">        
    <div id="first" class="tab-pane fade in active">
        Text        
        <a class="btn btn-primary btn-lg" onclick="$('#second_tab').trigger('click')">Second</a>        
        <a class="btn btn-primary btn-lg" onclick="$('#third_tab').trigger('click')">Third</a>        
    </div>
    ....
</div>

здесь Демо

10
Aya Mohamed

вы также можете использовать .tab('show') для большей гибкости

https://codepen.io/jacobgoh101/pen/ALELNr

<button class="btn btn-primary" onclick="menu3()">go to menu 3</button>

javaScript:

function menu3(){
  $('[href="#menu3"]').tab('show');
}

Документация по начальной загрузке: https://getbootstrap.com/javascript/#tabs

32
Jacob Goh

Вот ваш js

$('#submit').click(function (e) {
    $('#myTab a[href=#tabs3-2k_tab2]').tab('show')
    e.preventDefault()
});
0
Abenezer _abeti

Я рекомендовал это коды.

<div class="tab-control" data-role="tab-control">
    <ul>
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
    </ul>
    <div class="frames">
        <div class="frame" id="tab1">
            //Content tab 1
        </div>
        <div class="frame" id="tab2">
            //Content tab 2
        </div>
    </div>
</div>

Добавьте эффекты, которые вы хотите в атрибуте класса.

0
Kramer

Я рекомендую подход с использованием атрибутов данных, это чистое решение и отдельный вид из кода контроллера

<a href="#btn-next"data-next="#tab1" class="btn btn-primary">go to menu 1</a>
<a href="#btn-next"data-next="#tab2" class="btn btn-primary">go to menu 2</a>

javaScript:

$('a[href="#btn-next"]').on('click', function(event){
  event.preventDefault();
  var tab = $(this).data('next'); 
  $(tab).tab('show');
})
0
CatholicForEver