Выберите вкладку по умолчанию при загрузке страницы - PullRequest
Новая
       35

Выберите вкладку по умолчанию при загрузке страницы

0 голосов
/ 27 июня 2019

Мне бы хотелось, чтобы первая вкладка была выбрана при загрузке страницы.

Привет, Мне бы хотелось, чтобы первая вкладка "Обнаружение" была выбрана при загрузке страницы.Я запустил несколько версий одного и того же кода функциональности в Javascript, и, похоже, ничего не работает.Мне интересно, правильный ли мой формат кода в Javascript или HTML.

Я использовал это в качестве ссылки: https://codepen.io/PeteTalksWeb/pen/vmyJBd

Буду очень признателен за любые отзывы или помощь по этому вопросу, спасибозаблаговременно.

<div id="tabs" class="tabbable-line">
 <ul class="nav nav-tabs text-center">
  <li class="active">
   <a href="#tabs-1" data-toggle="tab">Discover</a>
  </li>
  <li>
   <a href="#tabs-2" data-toggle="tab">Planning</a>
  </li>
  <li>
   <a href="#tabs-3" data-toggle="tab">Marketing</a>
  </li>
  <li>
   <a href="#tabs-4" data-toggle="tab">Growth</a>
  </li>
 </ul>
<div class="tab-content">
<div class="tab-pane active" id="tabs-1">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-1.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

<div class="tab-pane" id="tabs-2">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-2.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

<div class="tab-pane" id="tabs-3">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-3.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

<div class="tab-pane" id="tabs-4">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-4.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

</div>
</div>
<div id="tabid"></div>

<script>
 $("#tabs").tabs({
 active: 0,
 activate: function (event, ui) {
 var active = $('#tabs').tabs('option', 'active');
 }
 });
</script>

Я ожидал, что вкладка / ссылка будет выбрана при загрузке страницы, но вместо этого получилось, что вкладка «вспыхнула», как если бы она была выбрана, и вскоре исчезла.

РЕДАКТИРОВАТЬ Я получил эту ошибку: Uncaught TypeError: $ (...). Tabs не является функцией Что это значит?

Ответы [ 2 ]

0 голосов
/ 27 июня 2019

Я взял ваш код и создал с ним JSFiddle здесь .

{примечание для модератора - не включать код уже в вопросе]

Ваш код работает нормально, и, как вы увидите, я обязательно включил оба следующих ресурса:

Сам Jquery - https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js

JQuery UI - https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js

В моем примере измените следующее: 

active: 1,

до 

active: 0,

и вы увидите, что выбрана другая вкладка.

Удачи

0 голосов
/ 27 июня 2019

Фрагмент кода ниже показывает, что он работает нормально.Пожалуйста, проверьте следующее:

  1. Ваш javascript обернут функцией document.ready: либо

$(function(){

, либо 

$(document).ready(function(){

(оба работают одинаково - см. Ниже StackSnippet о том, как использовался первый)

Вы включили все необходимые библиотеки (файлы CSS, jQuery.js и jQueryUI.js) - как в следующем фрагменте.Вы можете включить их так же, как они находятся в тегах <head> вашей страницы. 

$(function(){
  $("#tabs").tabs({
    active: 0,
    activate: function (event, ui) {
      var active = $('#tabs').tabs('option', 'active');
    }
  });
}); //end document.ready
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" >
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="tabs" class="tabbable-line">
 <ul class="nav nav-tabs text-center">
  <li class="active">
   <a href="#tabs-1" data-toggle="tab">Discover</a>
  </li>
  <li>
   <a href="#tabs-2" data-toggle="tab">Planning</a>
  </li>
  <li>
   <a href="#tabs-3" data-toggle="tab">Marketing</a>
  </li>
  <li>
   <a href="#tabs-4" data-toggle="tab">Growth</a>
  </li>
 </ul>
<div class="tab-content">
<div class="tab-pane active" id="tabs-1">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-1.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

<div class="tab-pane" id="tabs-2">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-2.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

<div class="tab-pane" id="tabs-3">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-3.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

<div class="tab-pane" id="tabs-4">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-4.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

</div>
</div>
<div id="tabid"></div>
<script>
</script>
...