我如何将两个链接连接到类似的选项卡?

我想创建代表两个选项卡的样式-当您单击每个选项卡时，它是一个href链接。以下是我微弱的尝试。所以第一个(活动的)标签是"所有者"标签，标签有一个白色的背景，第二个标签有一个灰色的背景。

我想用两种方式改变它:

我想让边界黑线延伸到页面的末尾(目前这条线只是停在宠物标签的末尾)
我希望非活动选项卡(本例中的第二个选项卡)在灰色

.active-tab {
background-color: white;
color: black;
padding: 14px 25px;
text-align: center;
text-decoration: underline;
display: inline-block;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}
.inactive-tab {
background-color: #B8B8B8;
color: black;
padding: 14px 25px;
text-align: center;
text-decoration: underline;
display: inline-block;
border-bottom: 1px solid black;
}

<a class="active-tab" href="default.asp" target="_blank">Owners</a><a class="inactive-tab" href="default.asp" target="_blank">Pets</a>

我已经调整了您所要求的更改，并解释了更改的原因。

https://jsfiddle.net/6whgpqv0/

nav {
border-bottom: 1px solid black; /* A line all the way to the end */
display: flex; /* Justify all content to the start of the container */
}
nav a {
display: inline-block; /* Make the link inline blocks so that it will adhere to the negative margin rule */
margin-bottom: -1px; /* Offset the bottom of the link by 1px so the bottom border overlaps with the nav border */
}
.active-tab {
background-color: white;
color: black;
padding: 14px 25px;
text-align: center;
text-decoration: underline;
display: inline-block;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}
.inactive-tab {
background-color: #B8B8B8;
color: black;
padding: 14px 25px;
text-align: center;
text-decoration: underline;
display: inline-block;
border-bottom: 1px solid black;
box-shadow: inset 0 0 0 1px #fff; /* White border around the inactive tab */
}

我希望这是你想要的结果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.active-tab {
background-color: white;
color: black;
padding: 14px 25px;
text-align: center;
text-decoration: underline;
display: inline-block;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}
.inactive-tab {
background-color: #B8B8B8;
color: black;
padding: 14px 25px;
text-align: center;
text-decoration: underline;
display: inline-block;
border: 2px solid white;
}
.line {
border-bottom:1px solid black;
}
</style>
</head>
<body>
<a class="active-tab" href="default.asp" target="_blank">Owners</a><a class="inactive-tab" href="default.asp"
target="_blank">Pets</a>
<div class="line">
</div>
</body>
</html>

如果你还需要帮助，请在这里留言，我会尽力帮助你的

我在您的as周围添加了一个包装器div，以将黑色边框扩展到页面的末尾。我还添加了1px solid white边界到.inactive-tab。更新的例子:

.tabs {
display: flex;
border-bottom: 1px solid black;
}
.tabs a {
margin-bottom: -1px;
}
.active-tab {
background-color: white;
color: black;
padding: 14px 25px;
text-align: center;
text-decoration: underline;
display: block;
border: 1px solid black;
border-bottom: 1px solid white;
}
.inactive-tab {
background-color: #B8B8B8;
color: black;
padding: 14px 25px;
text-align: center;
text-decoration: underline;
display: block;
border: 1px solid white;
border-bottom: 1px solid black;
}

<div class="tabs">
<a class="active-tab" href="default.asp" target="_blank">Owners</a>
<a class="inactive-tab" href="default.asp" target="_blank">Pets</a>
</div>

相关内容

最新更新

热门标签：