如何使选项卡的 div id 中的内容在页面访问时显示，但在必要时淡出-解网

问：

我的编码的最后一个障碍困扰着我。在我创建的大多数代码中，我使用四个选项卡/按钮来分隔信息部分。

CSS： -tabs 2-4 使用与以下相同的起始格式-

.TAB1 {
 height: 100px; 
 width: 100px;
 background-color: #fff; 
 border: 0.75px double black; 
 position: fixed; 
 left: 50px;
 bottom: 50px;
 z-index: 25; 
 transform: rotate(0deg);
 transition: 1s;}

TABS!!!! NUMBER ACCORDINGLY

.alt{
  opacity: 0;
  pointer-events: none;
  transition: 1s;}
.alt:target{
  opacity: 1;
  pointer-events: auto;}

HTML格式：

<a class="TAB1" href="#1"></a>
<a class="TAB2" href="#2"></a>
<a class="TAB3" href="#3"></a>
<a class="TAB4" href="#4"></a>

<div id="1" class="alt">
INFORMATION CONTENT
</div>

我不使用 JavaScript，也不完全确定如何使用。我只想要里面的内容

出现在页面访问中。但是，我需要它在以下情况下消失 ``` ``` 单击相应的选项卡。目前，由于我的 .alt div 的不透明度为 0，因此所有四个都是不透明度 0。我可以在我的 HTML 或 CSS 部分添加/更改任何内容来解决我的问题吗？

我唯一的解决方法是让 div id 1 有一个容器，然后让 div id 3-4 有一个具有更高 z 索引的相同容器，以使其看起来因为它们都在同一个容器中。这是以删除淡入淡出部分的动画为代价的，出于审美目的，我更喜欢这些动画。

HTML CSS 按钮选项卡不透明度

如何使选项卡的 div id 中的内容在页面访问时显示，但在必要时淡出

How to make the content within a tab's div id appear on page visit, but fade away when necessary

评论