代码之家 › 专栏 › 技术社区 › Anggi alansori

如何更改非活动颜色选项卡引导

twitter-bootstrap-3 css html

Anggi alansori · 技术社区 · 7 年前

我正在尝试更改非活动选项卡,但如何更改? 我的代码如下:

css

.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li > a:hover {
background-color: #F47321 !important;
border-color: #FFFFFF !important;
color: #FFFFFF;
}

2 回复 | 直到 7 年前

Akash 7 年前

您使用的代码用于更改活动选项卡的颜色和悬停标记。

请查找以下代码,以更改活动和非活动选项卡的颜色。请随时询问任何疑问。

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Tabs</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.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style>
    /*   Change Color for Active Tabs     */
    .nav-pills>li.active>a,
    .nav-pills>li.active>a:focus,
    .nav-pills>li.active>a:hover,
    .nav-pills>li>a:hover,
    .nav>li>a:hover {
      background-color: #F47321;
      border-color: #FFFFFF;
      color: #FFFFFF;
    }
    
    /*   Change Color for Inactive Tabs     */
    .nav-pills>li>a {
      background-color: #777;
      border-color: #FFFFFF;
      color: #FFFFFF;
    }
  </style>
</head>

<body>

  <div class="container">
    <h1>Change color for tabs</h1>
    <hr>
    <ul class="nav nav-pills">
      <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
      <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
      <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
      <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
    </ul>

    <div class="tab-content">
      <div id="home" class="tab-pane fade in active">
        <h3>HOME</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
      <div id="menu1" class="tab-pane fade">
        <h3>Menu 1</h3>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div id="menu2" class="tab-pane fade">
        <h3>Menu 2</h3>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      </div>
      <div id="menu3" class="tab-pane fade">
        <h3>Menu 3</h3>
        <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
    </div>
  </div>

</body>

</html>

Alan 7 年前

检查此示例:

<html>

  <head>
    <link data-require="bootstrap@*" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="bootstrap@*" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <style type="text/css" media="all">
      .nav-tabs{
  background-color:#161616;
}
.tab-content{
    background-color:#303136;
    color:#fff;
    padding:5px
}
.nav-tabs > li > a{
  border: medium none;
}
.nav-tabs > li > a:hover{
  background-color: #303136 !important;
    border: medium none;
    border-radius: 0;
    color:#fff;
}
    </style>
  </head>

  <body>
    <ul class="nav nav-tabs">
      <li class="active">
        <a href="#">Home</a>
      </li>
      <li>
        <a href="#">Menu 1</a>
      </li>
      <li>
        <a href="#">Menu 2</a>
      </li>
      <li>
        <a href="#">Menu 3</a>
      </li>
    </ul>
  </body>

</html>