在内容之间切换

Question

我有以下代码。

访问以下网站查看输出

https://jsfiddle.net/name_123/qzx3auev/1/

我想将活动切换的背景颜色更改为白色。

 <div class="col-md-9 register-right">
                        <ul class="nav nav-pills nav-tabs nav-justified" id="myTab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link " id="home-tab" data-toggle="pill" href="#home" role="tab" aria-controls="home" aria-selected="true">Buyer</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link " id="profile-tab" data-toggle="pill" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Seller</a>
                            </li>
                        </ul>
                       
            </div>

CSS 是

 
.nav-tabs{
    margin-top: 3%;
    border: none;
    background: #0062cc;
    border-radius: 1.5rem;
    width: 28%;
    float: right;
}
.nav-tabs .nav-link{
    padding: 2%;
    height: 34px;
    font-weight: 600;
    color: #fff;
    border-top-right-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
}
.nav-tabs .nav-link:hover{
    border: none;
}
.nav-tabs .nav-link.active{
    width: 100px;
    color: #d8dfe6;
    border: 2px solid #0062cc;
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
}

 

Answer 1

以下内容可以解决您的问题吗？

.nav-tabs {
  margin-top: 3%;
  border: none;
  background: #0062cc;
  border-radius: 1.5rem;
  width: 28%;
  float: right;
}

.nav-tabs .nav-link {
  padding: 2%;
  height: 34px;
  font-weight: 600;
  color: #fff;
  border-top-right-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
}

.nav-tabs .nav-link:hover {
  border: none;
}

.nav-tabs .nav-item.active .nav-link {
  width: 100px;
  background: white;
  border: 2px solid #0062cc;
  color: #0062cc;
  border-top-left-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.coam/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>
<div class="col-md-9 register-right">
  <ul class="nav nav-pills nav-tabs nav-justified" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link " id="home-tab" data-toggle="pill" href="#home" role="tab" aria-controls="home" aria-selected="true">Buyer</a>
    </li>
    <li class="nav-item">
      <a class="nav-link " id="profile-tab" data-toggle="pill" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Seller</a>
    </li>
  </ul>
</div>