Bootstrap data-toggle属性未恢复到旧选项卡

Question

这是我在代码下面的codepen或view

如果你点击一个选项卡，它的内容将成功显示，然后点击另一个选项卡，该内容也将成功显示，然而在那之后，如果你回到你刚刚点击的前一个选项卡，那么前一个选项卡的内容将不会显示，相反，第二个选项卡的内容将简单地留在那里。为什么会这样呢?

JS:

$k('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//new tab
console.log(e.target);

//previous tab
console.log(e.relatedTarget);
})

CSS:

/*nice Menu*/
.rotate {
-moz-transition: all .5s linear;
-webkit-transition: all .5s linear;
transition: all .5s linear;
}
.rotate.down {
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
transform:rotate(90deg);
}
a {
text-decoration: none;
}
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.pad-15 {
padding: 15px;
}
.clear {
clear: both; 
}
.clear:after, .clear:before{ 
content: " ";
display: table;
}
a.toggle-nav {
top: 12px;
right: 15px;
position: absolute;
color: #fff;
line-height: 25px;
font-size: 22px;
background: #DE5939;
padding: 3px 5px;
border-radius: 1px;
transform: rotate(90deg);
}
.nice-nav {
width: 250px;
height: 100%;
transition:all 0.4s ease-in-out 0s;
float:left;
font-size: 15px;
}
.nice-nav li.child-menu span.toggle-right {
bottom: 0;
display: inline-block;
float: right;
padding: 15px;
position: absolute;
right: 0;
text-align: right;
top: 3px;
}
.nice-nav ul li a {
background: #fff none repeat scroll 0 0;
border: 1px solid #f6f6f6;
color: #333;
display: block;
padding: 12px;
position: relative;
}
.nice-nav ul li.child-menu ul {
background: #fff;
display: none;
}
.nice-nav ul li.child-menu ul li a {
background: #f6f6f6;
padding: 10px 20px;
}
.nice-nav > ul {
margin: 0;
padding: 0;
}
.nice-nav > ul li{
list-style: none;
margin: 2px auto;
}
.nice-nav ul li ul {
padding: 0;
}
.modal-backdrop.fade.show{
display: none;
}
/*nice Menu*/

Answer 1

您忘记在ul类中添加nav了

从你的代码:

<!--nice menu-->
<div class="nice-nav">
<ul>

:

<!--nice menu-->
<div class="nice-nav">
<ul class="nav d-block" aria-orientation="vertical">