【发布时间】:2021-01-18 13:41:24
【问题描述】:
这是我的codepen 或查看下面的代码。
如果您单击一个选项卡,其内容将成功显示,然后单击另一个选项卡,该内容也将成功显示,但是之后,如果您返回刚刚单击的上一个选项卡,则该上一个选项卡的内容不会显示,相反,第二个选项卡的内容将简单地保留在那里。为什么会这样?
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*/
【问题讨论】:
标签: javascript html jquery css twitter-bootstrap