时间戳

首页 > 解决方案 > 如何更改 html/css 中的选项卡窗格颜色？

html - 如何更改 html/css 中的选项卡窗格颜色？

问题描述

我想更改选项卡窗格的默认颜色（蓝色）。

我希望当用户单击任何选项卡时，它将变为“橙色”，其余选项卡颜色将保持“灰色”。

我正在尝试以下代码：

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
 <a class="nav-link active" data-toggle="tab" href="#menu1" style="color:orange">Description</a>
</li>
<li class="nav-item">
 <a class="nav-link" data-toggle="tab" href="#menu2" style="color:gray">Product Reviews</a>
</li>
<li class="nav-item">
 <a class="nav-link" data-toggle="tab" href="#menu3" style="color:gray">Specifications</a>
</li>
<li class="nav-item">
 <a class="nav-link" data-toggle="tab" href="#menu4" style="color:gray">Warranty</a>
</li>

</ul>


<!-- Start Tab panes -->
<div class="tab-content">

<!-- Start Tab Pane Menu 1 -->
<div id="menu1" class="container tab-pane active" style="color:orange"><br>
 <p>Hello Description!</p>
</div>
<!-- End Tab Pane Menu 1 -->


<!-- Start Tab Pane Menu 2 -->

<div id="menu2" class="container tab-pane fade" style="color:orange"><br>
 <p>Hello Product Reviews!</p>
</div> <!-- End Second Container -->

<!-- End Tab Pane Menu 2 -->

<!-- Start Tab Pane Menu 3 -->

 <div id="menu3" class="container tab-pane fade" style="color:orange"><br>
   <p>Hello Store Info!</p>
 </div> <!-- End Second Container -->

<!-- End Tab Pane Menu 3 -->

 <!-- Start Tab Pane Menu 4 -->

 <div id="menu4" class="container tab-pane fade" style="color:orange"><br>
   <p>Hello Store Reviews!</p>
 </div> <!-- End Second Container -->

 <!-- End Tab Pane Menu 4 -->

我点击了下图中的“产品评论”标签。但颜色仍然是“灰色”而不是“橙色”

单击“产品评论”选项卡后，“描述”选项卡的颜色没有变为“灰色”，仍然显示“橙色”

在此处输入图像描述

我究竟做错了什么？

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

嗨不要添加内联样式

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
      <style>
         .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover {
         color: orange;
         }
         .nav-tabs>li>a {
         color:gray;
         }
      </style>
   </head>
   <body>
      <body>
         <div class="container">
         <!-- Nav tabs -->
         <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item">
               <a class="nav-link active" data-toggle="tab" href="#menu1">Description</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" data-toggle="tab" href="#menu2">Product Reviews</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" data-toggle="tab" href="#menu3">Specifications</a>
            </li>
            <li class="nav-item">
               <a class="nav-link" data-toggle="tab" href="#menu4">Warranty</a>
            </li>
         </ul>
         <!-- Start Tab panes -->
         <div class="tab-content">
            <!-- Start Tab Pane Menu 1 -->
            <div id="menu1" class="container tab-pane active">
               <br>
               <p>Hello Description!</p>
            </div>
            <!-- End Tab Pane Menu 1 -->
            <!-- Start Tab Pane Menu 2 -->
            <div id="menu2" class="container tab-pane fade">
               <br>
               <p>Hello Product Reviews!</p>
            </div>
            <!-- End Second Container -->
            <!-- End Tab Pane Menu 2 -->
            <!-- Start Tab Pane Menu 3 -->
            <div id="menu3" class="container tab-pane fade" >
               <br>
               <p>Hello Store Info!</p>
            </div>
            <!-- End Second Container -->
            <!-- End Tab Pane Menu 3 -->
            <!-- Start Tab Pane Menu 4 -->
            <div id="menu4" class="container tab-pane fade">
               <br>
               <p>Hello Store Reviews!</p>
            </div>
            <!-- End Second Container -->
         </div>
   </body>
   </body>
</html>

推荐阅读