Javascript 选项卡在引导v4.3.1中不起作用，但在v4.1.0中起作用

我有一个非常特殊的情况。在玩了将近3个小时的代码后，我才意识到我的代码在最新版本的引导v4.3.1上不起作用，但在v4.1.0中效果很好

使用Bootstrap v4.1.0工作JSFIDLE:

不工作jsidle使用Bootstrap v.4.3.1:

请注意，两个版本的代码保持不变。原因可能是什么

HTML:

你生活中的两个变化

• 将class

  nav链接添加到所有
  li>a

• 更改了ID的名称，以便它们不会以数字开头。。。所以“1a”变成了“a1a”#2a'变成了#a2a'。。。诸如此类

.nav a{
利润率：10px；
背景色：#eee；
边界半径：2px；
填充：7px；
}
.选项卡内容.选项卡窗格h3{
不透明度：0；
-moz变换：translateX（50px）；
-ms变换：translateX（50px）；
-o-变换：translateX（50px）；
-webkit转换：translateX（50px）；
转换：translateX（50px）；
过渡：1s全立方贝塞尔（0.075,0.82,0.165,1）；
}
.选项卡内容.活动h3{
不透明度：1；
变换：平移（0）；
}
#exTab1.tab内容{
溢出：隐藏；
}
#exTab1>.tab内容>.tab窗格{
显示：块；
位置：绝对位置；
溢出：隐藏；
}

选项卡的内容背景色相同
我们使用类nav pills代替nav tabs，后者会自动为选项卡创建背景色
我们将clearfix应用于选项卡内容，以消除选项卡和内容之间的间隙
我们使用css将内容的背景色更改为与选项卡相同

好奇。为什么以数字开头在这里很重要？这是HTML的一个缺点吗？如果这些名称在Bootstrap4.1上工作，那么它就不可能是HTML。。。可能是bootstrap JS是罪魁祸首，事实上，我在过去注意到，带有数字的名称有时会产生问题，但无法找出原因。非常感谢。接受您的答案。前导数字也会导致4.6中的问题。非常奇怪，这些容器似乎都有3.x中不存在的新怪癖。

<div id="exTab1" class="container">
  <ul class="nav nav-pills">
    <li class="active">
      <a href="#1a" data-toggle="tab">Overview</a>
    </li>
    <li><a href="#2a" data-toggle="tab">About Us</a>
    </li>
    <li><a href="#3a" data-toggle="tab">Services</a>
    </li>
    <li><a href="#4a" data-toggle="tab">Contact Us</a>
    </li>
  </ul>
  <div class="tab-content clearfix">
    <div class="tab-pane active" id="1a">
      <h3>Content's background color is the same for the tab</h3>
    </div>
    <div class="tab-pane" id="2a">
      <h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
    </div>
    <div class="tab-pane" id="3a">
      <h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3>
    </div>
    <div class="tab-pane" id="4a">
      <h3>We use css to change the background color of the content to be equal to the tab</h3>
    </div>
  </div>
</div>

.nav a {
  margin: 10px;
  background-color: #eee;
  border-radius: 2px;
  padding: 7px;
}
.tab-content .tab-pane h3 {
    opacity: 0;
    -moz-transform: translateX(50px);
    -ms-transform: translateX(50px);
    -o-transform: translateX(50px);
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
    transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}  
.tab-content .active h3 {
    opacity: 1;
    transform: translate(0);
}
#exTab1 .tab-content {
    overflow: hidden;
} 
#exTab1>.tab-content>.tab-pane {
    display: block;
    position: absolute;
    overflow: hidden;
}