Question

我正在尝试使用引导程序版本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>

Answer 1

将您的id更改为以字母开头：

<!-- 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>

Salim

Answer 2

ID令牌必须以字母([A-Za-z]) 开头，后可以跟任意数量的字母，数字([0-9])，hyphens (-)，{{1} }，underscores (_)和colons (:)。

对于class属性，没有这种限制，类名可以包含任何字符，并且不必以字母开头即可有效。

您的代码在更改ID名称后可以正常工作，运行代码段并对其进行测试：

periods (.)

如何在Bootstrap 4.1.3中正确使用选项卡

2 个答案: