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

Question

I one last hurdle to my coding that is troubling me. On most codes I create, I use four tabs/buttons to separate sections of information.

CSS: -tabs 2-4 use the same starting format as below-

.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>

I don't use JavaScript and I'm not entirely sure how. I just want the content within

to appear on page visit. However, I need it to disappear when ``` ``` have their corresponding tabs clicked. Currently, all four are opacity 0 due to my .alt div having opacity 0. Is there anything I can add/change to my HTML or CSS sections to solve my problem?

My only workaround is to have div id 1 have a container to itself, then have div ids 3-4 have an identical container with a higher z-index to make it appear as they are all within the same container. This comes at the cost of removing the animation of the sections fading in and out which I prefer for aesthetic purposes.