css本页选项卡 |jsp页面引入css

前端开发中，使用选项卡是非常常见的一种布局方式。选项卡不仅可以优化用户的浏览体验，同时也是一种非常灵活的设计方式。今天大家来学习一下如何使用CSS实现本页选项卡的效果。 首先，大家需要在HTML中添加一个选项卡的容器。这个容器可以是一个div，也可以是ul标签。接着，大家需要定义选项卡的样式。

.tab {
display: flex;
justify-content: center;
align-items: center;
background-color: #f1f1f1;
padding: 10px;
}
.tab__item {
padding: 10px;
margin-right: 10px;
cursor: pointer;
font-weight: bold;
color: #333;
}
.tab__item.active {
background-color: #fff;
color: #ff5722;
border-bottom: 2px solid #ff5722;
}

上述代码中，大家使用了flex布局，使得选项卡容器可以水平居中。同时大家还定义了选项卡的基本样式，包括背景颜色、内边距等。另外，大家定义了.tab__item的样式，包括内边距、右边距、鼠标指针以及字体样式。 接着大家需要使用JavaScript来实现选项卡的切换功能。

const tabs = document.querySelectorAll('.tab__item');
const contents = document.querySelectorAll('.tab__content');
tabs.forEach((tab, index) =>{
tab.addEventListener('click', () =>{
tabs.forEach(tab =>tab.classList.remove('active'));
contents.forEach(content =>content.classList.remove('active'));
tab.classList.add('active');
contents[index].classList.add('active');
});
});

上述代码中，大家首先使用querySelectorAll方法获取选项卡和内容的元素，然后使用forEach方法遍历每个选项卡。当用户点击某个选项卡时，大家将所有的选项卡和内容元素的active类都移除，然后给当前被点击的选项卡和对应的内容元素添加active类。 最后，大家需要在HTML中填充选项卡和选项卡内容。以下是示例代码：

选项卡1
选项卡2
选项卡3
选项卡4
选项卡1的内容
选项卡2的内容
选项卡3的内容
选项卡4的内容

通过以上几步操作，大家便完成了一个简单的选项卡布局。使用CSS实现选项卡不仅可以提高用户体验，同时也是一种简洁、灵活的设计方式。