我的 html 中有 Bootstrap 选项卡，它工作正常。但是这里我需要更改bootstrap选项卡的效果。当前，当用户单击选项卡时，选项卡会打开。
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-6 col-sm-6 col-xs-12" style="overflow:hidden"><img src="http://designpieces.com/wp-content/uploads/2012/12/background-image.jpg"> </div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="panel-group" id="accordion">
<div class="panel panel-default panel1">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" id="tab1" data-parent="#accordion" href="#collapse1">Tab1 ></a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Tab2 ></a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Tab3 ></a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Tab4 ></a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
</div>
</body>
</html>这是 js fiddle https://jsfiddle.net/felixtm/nozp2pge/2/
我想改变bootstrap tab的效果和样式如下图
这是第一张图片 
.
当用户点击 tab1(第二张图片) 
我需要的是像第一张图片一样需要带有右侧箭头的选项卡。当我们点击选项卡时，整个选项卡 View 将被相应的选项卡内容替换为带有后退按钮的动画中的任何一个(如第二张图片)。当用户点击后退按钮时，整个选项卡(第一张图片)需要再次显示。
为此我编写了代码，但尚未完成且不完美
<script>
$("#tab1").on("click",function(){
$(".panel").hide();
$(".panel1").show();
});
</script>
请帮助解决这个问题。
最佳答案
所有这些都可以使用 CSS 伪元素来完成。
selector:pseudo-element {
property: value;
}
如果 CSS 可以胜任，您应该始终尝试在使用 JavaScript 或 jQuery 之前使用 CSS。只需将一个类添加到折叠的标题和相应的样式中。
请注意我是如何将 collapsed 类添加到具有默认折叠面板的部分标题。
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2" class="collapsed">Tab2</a>
然后仅使用 CSS 设置标题样式
.panel-title a {
display: block;
text-align: center;
}
.panel-title a:active,
.panel-title a:focus,
.panel-title a:hover {
text-decoration: none;
}
.panel-title a:before {
content: "<";
position: absolute;
left: 30px;
}
.panel-title a.collapsed {
text-align: left;
}
.panel-title a.collapsed:before {
content: "";
}
.panel-title a.collapsed:after {
content: ">";
position: absolute;
right: 30px;
}
这是我正在谈论的最新 fiddle https://jsfiddle.net/yongchuc/nozp2pge/4/ .
已编辑
啊，好的。我现在知道了。为此，您将需要 jQuery 并希望检查哪个标题被单击并隐藏该面板的同级。
$(function () {
$('.panel-title a').on('click', function () {
$(this).closest('.panel').siblings().toggle();
});
});
.toggle() 用于在再次单击标题时显示其他面板。
我还在第一个标题中添加了 collapsed 类，以便隐藏该面板，就像上面的第一张图片一样。这是包含这些更改的更新 fiddle 供您查看。 https://jsfiddle.net/yongchuc/nozp2pge/5/
关于jquery - 更改 Bootstrap Tab 动画和 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40528791/