请帮我写一段代码,使用原生CSS完成类似BOOSTSTRAP一样的胶囊式标签页,要求:标签有四个,使用垂直方向堆叠排列
时间: 2024-05-12 13:15:20 浏览: 18
以下是 HTML 和 CSS 的代码实现:
```
<!DOCTYPE html>
<html>
<head>
<title>Vertical Tabs</title>
<style>
.tab {
border: 1px solid #ccc;
background-color: #f1f1f1;
overflow: hidden;
width: 200px;
}
.tab button {
background-color: inherit;
color: #666;
display: block;
padding: 10px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 16px;
}
.tab button.active, .tab button:hover {
background-color: #ddd;
color: black;
}
.tabcontent {
padding: 12px 20px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body>
<div class="tab">
<button class="active">Tab 1</button>
<div class="tabcontent">
<h3>Content for Tab 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac vehicula orci. Ut cursus ipsum vitae elit laoreet lobortis. Mauris quis ex a risus lobortis lacinia. Morbi feugiat aliquam lectus, non porttitor velit viverra a. Ut aliquet, nunc et blandit commodo, felis leo aliquam sapien, id tincidunt risus orci et nulla. Nulla facilisi. Sed et egestas massa. Aenean vel mi vel nisl fermentum hendrerit.</p>
</div>
<button>Tab 2</button>
<div class="tabcontent">
<h3>Content for Tab 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac vehicula orci. Ut cursus ipsum vitae elit laoreet lobortis. Mauris quis ex a risus lobortis lacinia. Morbi feugiat aliquam lectus, non porttitor velit viverra a. Ut aliquet, nunc et blandit commodo, felis leo aliquam sapien, id tincidunt risus orci et nulla. Nulla facilisi. Sed et egestas massa. Aenean vel mi vel nisl fermentum hendrerit.</p>
</div>
<button>Tab 3</button>
<div class="tabcontent">
<h3>Content for Tab 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac vehicula orci. Ut cursus ipsum vitae elit laoreet lobortis. Mauris quis ex a risus lobortis lacinia. Morbi feugiat aliquam lectus, non porttitor velit viverra a. Ut aliquet, nunc et blandit commodo, felis leo aliquam sapien, id tincidunt risus orci et nulla. Nulla facilisi. Sed et egestas massa. Aenean vel mi vel nisl fermentum hendrerit.</p>
</div>
<button>Tab 4</button>
<div class="tabcontent">
<h3>Content for Tab 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac vehicula orci. Ut cursus ipsum vitae elit laoreet lobortis. Mauris quis ex a risus lobortis lacinia. Morbi feugiat aliquam lectus, non porttitor velit viverra a. Ut aliquet, nunc et blandit commodo, felis leo aliquam sapien, id tincidunt risus orci et nulla. Nulla facilisi. Sed et egestas massa. Aenean vel mi vel nisl fermentum hendrerit.</p>
</div>
</div>
<script>
var buttons = document.querySelectorAll(".tab button");
var tabcontents = document.querySelectorAll(".tabcontent");
buttons.forEach(function(button, index) {
button.addEventListener("click", function() {
buttons.forEach(function(button) {
button.classList.remove("active");
});
tabcontents.forEach(function(tabcontent) {
tabcontent.style.display = "none";
});
button.classList.add("active");
tabcontents[index].style.display = "block";
});
});
</script>
</body>
</html>
```
在这个代码中,我们创建了一个类名为 `tab` 的 `div` 元素,其中包含了四个 `button` 元素和四个 `div` 元素。 `button` 元素是标签的标题,而 `div` 元素是标签的内容。我们使用 CSS 中的 `display: none` 属性来隐藏所有的标签内容,当用户点击某个标签时,我们将对应的标签内容显示出来。
在 CSS 中,我们使用了 `border` 属性来设置标签的边框,`background-color` 属性来设置标签的背景色,`padding` 属性来设置标签的内边距,`width` 属性来设置标签的宽度,`text-align` 属性来设置标签的文本对齐方式,以及其他的一些样式属性。
在 JavaScript 中,我们使用了 `querySelectorAll` 函数来获取所有的 `button` 元素和 `div` 元素,然后使用 `forEach` 函数来遍历它们。当用户点击某个标签时,我们将遍历所有的标签并将它们的样式重置,然后再将当前被点击的标签设置为 `active` 标签并将它对应的内容显示出来。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![md](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)