添加不带javascript的选项卡4，仅添加html和css

添加不带 JavaScript 的选项卡4，仅添加 HTML 和 CSS，可以通过以下步骤实现：

首先，创建一个 HTML 文件，并在 <head> 标签中引入 CSS 文件：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <!-- 选项卡内容 -->
</body>
</html>

在 <body> 标签中添加选项卡的 HTML 结构，使用无序列表 <ul> 和列表项 <li> 来创建选项卡的导航栏，并使用 <div> 元素来包裹每个选项卡的内容：

<ul class="tab-nav">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
    <li><a href="#tab4">Tab 4</a></li>
</ul>

<div class="tab-content">
    <div id="tab1">
        <!-- Tab 1 内容 -->
    </div>
    <div id="tab2">
        <!-- Tab 2 内容 -->
    </div>
    <div id="tab3">
        <!-- Tab 3 内容 -->
    </div>
    <div id="tab4">
        <!-- Tab 4 内容 -->
    </div>
</div>

在 CSS 文件中定义选项卡的样式，使用伪类 :target 来控制选项卡的显示与隐藏，并使用 display: none; 来隐藏非当前选项卡的内容：

.tab-nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.tab-nav li {
    display: inline-block;
}

.tab-nav li a {
    display: block;
    padding: 10px;
    background-color: #ccc;
    text-decoration: none;
    color: #000;
}

.tab-nav li a:hover {
    background-color: #aaa;
}

.tab-content > div {
    display: none;
}

.tab-content > div:target {
    display: block;
}

通过以上步骤，就可以实现一个不带 JavaScript 的选项卡效果。点击不同的选项卡导航链接，对应的选项卡内容会显示出来，其他选项卡内容则会隐藏起来。这种实现方式适用于简单的静态网页，不需要复杂的交互功能。