как правильно использовать вкладки в начальной загрузке 4.1.3 - PullRequest
Новая
       10

как правильно использовать вкладки в начальной загрузке 4.1.3

0 голосов
/ 08 января 2019

Я пытаюсь использовать вкладки в загрузочной версии 4.1.3, вкладки работают нормально, но панель вкладок не меняется.

Я знаю, что таких вопросов много, я их читал, но ни одно из решений, которые я пробовал, не сработало. Я что-то упустил? 

<!-- Nav tabs -->
        <ul class="nav nav-tabs">
            <li class='nav-item'>
                    <a class='nav-link active' data-toggle='tab' href='#1'>12</a>
                 </li><li class='nav-item'>
                    <a class='nav-link ' data-toggle='tab' href='#2'>13</a>
                 </li><li class='nav-item'>
                    <a class='nav-link ' data-toggle='tab' href='#3'>16</a>
                 </li><li class='nav-item'>
                    <a class='nav-link ' data-toggle='tab' href='#4'>17</a>
                 </li><li class='nav-item'>
                    <a class='nav-link ' data-toggle='tab' href='#5'>18</a>
                 </li><li class='nav-item'>
                    <a class='nav-link ' data-toggle='tab' href='#6'>19</a>
                 </li>    
        </ul>

<!-- Tab panes -->
    <div class="tab-content">
        <div class='tab-pane container fade in show active' id='1'>1</div>
        <div class='tab-pane container fade' id='2'>2</div>
        <div class='tab-pane container fade' id='3'>3</div>
        <div class='tab-pane container fade' id='4'>4</div>
        <div class='tab-pane container fade' id='5'>5</div>
        <div class='tab-pane container fade' id='6'>6</div>    
    </div>

Ответы [ 2 ]

0 голосов
/ 09 января 2019

ID токены должны начинаться с буквы ([A-Za-z]), и после них может следовать любое количество букв, цифр ([0-9]), hyphens (-), underscores (_), colons (:) и periods (.).

Для атрибута класса такого ограничения нет, имена классов могут содержать любой символ, и им не обязательно начинаться с буквы, чтобы быть действительным.

Вот ваш код, работающий с изменением имен идентификаторов, запустите фрагмент кода и протестируйте его: 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>

<body>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs">
    <li class='nav-item'>
      <a class='nav-link active' data-toggle='tab' href='#1'>12</a>
    </li>
    <li class='nav-item'>
      <a class='nav-link ' data-toggle='tab' href='#A2'>13</a>
    </li>
    <li class='nav-item'>
      <a class='nav-link ' data-toggle='tab' href='#A3'>16</a>
    </li>
    <li class='nav-item'>
      <a class='nav-link ' data-toggle='tab' href='#A4'>17</a>
    </li>
    <li class='nav-item'>
      <a class='nav-link ' data-toggle='tab' href='#A5'>18</a>
    </li>
    <li class='nav-item'>
      <a class='nav-link ' data-toggle='tab' href='#A6'>19</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class='tab-pane container fade in show active' id='A1'>1</div>
    <div class='tab-pane container fade' id='A2'>2</div>
    <div class='tab-pane container fade' id='A3'>3</div>
    <div class='tab-pane container fade' id='A4'>4</div>
    <div class='tab-pane container fade' id='A5'>5</div>
    <div class='tab-pane container fade' id='A6'>6</div>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>

</html>
0 голосов
/ 08 января 2019

Измените id s, чтобы начать с буквы: 

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class='nav-item'>
    <a class='nav-link active' data-toggle='tab' href='#s1'>12</a>
  </li>
  <li class='nav-item'>
    <a class='nav-link ' data-toggle='tab' href='#s2'>13</a>
   </li>
   <li class='nav-item'>
     <a class='nav-link ' data-toggle='tab' href='#s3'>16</a>
   </li>
   <li class='nav-item'>
     <a class='nav-link ' data-toggle='tab' href='#s4'>17</a>
   </li>
   <li class='nav-item'>
     <a class='nav-link ' data-toggle='tab' href='#s5'>18</a>
   </li><li class='nav-item'>
     <a class='nav-link ' data-toggle='tab' href='#s6'>19</a>
   </li>    
 </ul>

 <!-- Tab panes -->
   <div class="tab-content">
     <div class='tab-pane container fade in show active' id='s1'>1</div>
     <div class='tab-pane container fade' id='s2'>2</div>
     <div class='tab-pane container fade' id='s3'>3</div>
     <div class='tab-pane container fade' id='s4'>4</div>
     <div class='tab-pane container fade' id='s5'>5</div>
     <div class='tab-pane container fade' id='s6'>6</div>    
   </div>

Салим

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...