Question

我想使用纯 html，css和javascript 创建网页。我创建了一个包含多个标签的网页。每个选项卡显示来自不同html文件的数据加载。请找到以下代码：

<div class="tabs">
    <div class="tab">
        <input type="radio" id="tab-1" name="tab-group-1" checked>
        <label for="tab-1">Tab1</label>
       <!-- <div class="content">
            <iframe src="tab1.html">
            </iframe>
        </div> -->
          <div class="content" style="width:700px;height:700px;">
           <!-- <embed type="text/html" src="summary.html"> -->
             <iframe src="tab1.html"></iframe>
        </div>
    </div>
   <div class="tab">
        <input type="radio" id="tab-2" name="tab-group-1">
        <label for="tab-2">Tab2</label>
        <div class="content">
           <iframe src="tab2.html"></iframe>
        </div>
    </div>
    <div class="tab">
        <input type="radio" id="tab-3" name="tab-group-1">
        <label for="tab-3">Tab3</label>
        <div class="content">
           <iframe src="tab3.html"></iframe>
        </div>
    </div>
</div>

我试图解决以下问题：

当用户点击tab1时，会显示内容，当用户点击Tab2时，仍然可以查看Tab1内容，如下面的小提示所示。

Fiddle

Answer 1

您没有隐藏标签，而是覆盖每个标签..您完成的html是正确的。。只有你的CSS需要一点代码

在您display: none;班级

上添加content

然后添加此块

    [type=radio]:checked ~ .content {
      display: block !important;
    }

这会在div.content

中显示radio:checked

plunker：here

Answer 2

你只需要一些小事：

        [type=radio]:checked ~ label ~ .content {
            z-index: 1;
            display: block;
        }

        [type=radio] ~ .content
        {
            display: none;
        }

单击tab2时，Tab1数据仍然可见

2 个答案: