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

我尝试在引导版本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>

1.
2.
3.
4.
5.
6.

更改您的

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>

1.
2.
3.
4.
5.
6.

---

Salim

ID标记必须以字母

（[a-Za-z]）

开头，后面可以跟任意数量的字母、数字

（[0-9]）

、

连字符（-）

、

下划线（u）

、

冒号（：）

和

句点（.）

对于class属性，没有这样的限制，类名可以包含任何字符，并且它们不必以字母开头才有效

以下是您的代码，可以很好地处理更改ID名称的问题，请运行代码段并对其进行测试：

1.
2.
3.
4.
5.
6.

是否包含引导JS？我刚刚将您的代码添加到我的引导设置中，它按预期工作。同意，当正确包含.js文件时，这可以正常工作。噢，哇。。。。。。谢谢这么简单的事情，我错过了。（我使用数据库中的id自动生成它们）非常感谢……是的，我试过了，效果很好。我真傻，竟然没注意到。谢谢你回答我的问题。