更改 Bootstrap Tab 动画和 css答案

【问题标题】：Change Bootstrap Tab animation and css更改 Bootstrap Tab 动画和 css
【发布时间】：2016-11-14 01:39:31
【问题描述】：

我的 html 中有引导选项卡，它工作正常。但是这里我需要更改引导选项卡的效果。当前，当用户单击选项卡时，选项卡会打开。

<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小提琴https://jsfiddle.net/felixtm/nozp2pge/2/

我想改变引导标签的效果和样式，如下图所示

这是第一张图片 。

当用户点击 tab1（第二张图片）

我需要的是带有右侧箭头的标签，就像第一张图片一样。当我们单击选项卡时，整个选项卡视图将被相应的选项卡内容替换为带有后退按钮的任何动画（如第二张图像）。当用户单击后退按钮时，整个选项卡（第一个图像）需要再次显示。

为此，我编写了代码，但尚未完成且不完美

<script>
        $("#tab1").on("click",function(){

            $(".panel").hide();
            $(".panel1").show();
        });

</script>

请帮助解决这个问题。

【问题讨论】：

您能否创建一个引导程序以便我们更好地了解您想要实现的目标？
请检查我的 jsfiddle 。我想像我提供的图像一样使用此选项卡。

标签： jquery html twitter-bootstrap css

【解决方案1】：

所有这些都可以使用 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;
}

这是你对我所说的 https://jsfiddle.net/yongchuc/nozp2pge/4/ 的更新小提琴。

已编辑

啊，好的。我现在知道了。为此，您将需要 jQuery，并且需要检查正在单击的标题并隐藏该面板的兄弟。

$(function () {
  $('.panel-title a').on('click', function () {
    $(this).closest('.panel').siblings().toggle();
  });
});

使用.toggle()，以便在再次单击标题时显示其他面板。

我还在第一个标题中添加了collapsed 类，以便隐藏该面板，就像上面的第一张图片一样。这是这些更改的更新小提琴供您查看。 https://jsfiddle.net/yongchuc/nozp2pge/5/

【讨论】：

谢谢你的朋友。但我需要根据我的问题进行一些修改。我看到了你的 jsfiddle 。在那里，当有人单击选项卡时，选项卡 1 带有后退箭头，并且其他选项卡正在显示，这很棒。但是，当有人单击 tab1 时，我只需要显示 tab1 的内容，并且需要隐藏所有其他选项卡。因此，当有人单击 tab1 时，他只会看到 tab1 标题及其内容。要查看其他选项卡，他需要单击 tab1 后退箭头。这就是我需要的。
@Felix 查看我编辑的回复/答案。这就是你要找的东西吗？
另外，我们如何更改默认选项卡动画样式。 ?就像单击 tab1 时一样，然后像 w3schools.com/css/tryit.asp?filename=trycss3_animation_delay 或 w3schools.com/css/css3_animations.asp 之类的任何动画
您只需创建所需的关键帧，然后将其设置为您想要动画的元素。这是为您更新的 jsfiddle，带有演示摇动。 jsfiddle.net/nozp2pge/7
我还有其他疑问，我会提出新问题。