css 在内容之间切换

o2g1uqev 于 5个月前发布在其他

关注(0)|答案(2)|浏览(56)

我有下面的Bootstrap版本4.1.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-link.active {
  width: 100px;
  color: #d8dfe6;
  border: 2px solid #0062cc;
  border-top-left-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
}

个字符

css

来源：https://stackoverflow.com/questions/77699364/toggle-between-content

2条答案

按热度按时间

ukxgm1gy1#

Bootstrap使用.active类为您处理活动状态。这是在nav-item上，而不是在nav-link上。下面应该可以解决您的问题。

.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;
}

个字符

赞(0）回复(0）举报 5个月前

ogsagwnx2#

谢谢你们所有人的答案在这里我发现了什么。
这是我做的。
在两个列表项中创建一个名为tab的类并将其中一个设置为活动。

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

字符串
使用以下css切换

.active, .tab:hover 
    {
        background-color: white;
        color: black;
        border-top-left-radius: 1.5rem;
        border-top-right-radius: 1rem;
        border-bottom-left-radius: 1.5rem;
    }

型
整个代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
    <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.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>
    
</head>
<body>
<style>
    

.nav-tabs{
    margin-top: 3%;
    border: none;
    background: #0062cc;
    border-radius: 1.5rem;
    width: auto;
    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{
    width: 100px;
    color: rgb(240, 237, 237);
    border: 2px solid #0062cc;
    border-top-left-radius: 1.5rem;
    border-bottom-left-radius: 1.5rem;
}
.active, .tab:hover 
{
    background-color: white;
    color: black;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1rem;
    border-bottom-left-radius: 1.5rem;
}
  
</style>              
<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 " class="tab active" data-toggle="pill" href="#home" role="tab" aria-controls="home" aria-selected="true">Buyer</a>
        </li>
        <li class="nav-item">
            <a class="nav-link " class="tab" data-toggle="pill" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Seller</a>
        </li>
    </ul>
                       
</div>
</body>
</html>

型
。

赞(0）回复(0）举报 5个月前

我来回答

css 在内容之间切换

2条答案

相关问题

热门标签

最新问答