我有两个div叠放在一起，并且希望能够通过单击选项卡/按钮来一次显示每个div的内容。我也希望它们可滚动，因为每个div中都有很多信息。我已经知道如何使用一些jQuery来替换div的外观，但是div似乎相互干扰。目前只有在删除div之一时滚动才有效。
window.onload = function () {
'use strict';
//tabs on right side of popup boxes
var aventureTab = document.getElementById('massiveAdventure');
var massartTab = document.getElementById('massArt');
//text information
var adventureText = document.getElementById('adventureText');
var artText = document.getElementById('massArt');
massartTab.onclick = function () {
TweenMax.to(adventureText, 0, {
opacity: 0,
})
TweenMax.to(artText, 0.5, {
opacity: 1,
})
}
}.text {
width: 565px;
height: 420px;
position: absolute;
z-index: 2000;
margin: 2rem 0 0 7.1rem;
padding: 40px 60px 0 0;
overflow: scroll;
}
.text::-webkit-scrollbar {
width: 0 !important
}
.text {
background-colour: grey;
overflow: -moz-scrollbars-none;
}
#adventureText {
opacity: 1;
z-index: 1;
position: absolute;
}
#artText {
opacity: 0;
z-index: 2;
position: absolute;
}<!--Critical Mass/Massive-->
<div class="col-sm" id="aboutSection">
<div class="text" id="adventureText">
<h1 class="display-3">Critical Massive<br> Adventure</h1>
<br>
<p>Critical Massive Adventure is an epic one-day festival and series of artist-led workshops that will explore the fantastic and ephemeral world of storytelling, performance, role playing games, imagination and adventure through the lens of contemporary art.
<br>
<br>On August 17th, Port Hope-based non profit arts organization, Critical Mass: A Centre for Contemporary Art, invites you to enjoy adventure, music, live performance, contemporary art, food, fun and getting to play D&D, dress up and be weird in a safe, inclusive space with your friends!
<br>
<br> Click on each icon in our legend for more information about what’s happening at the festival, to check out our pre-festival workshops, to register for our epic Community Dungeons & Dragons Tournament, and to contact us if you would like to get involved!
<br>
<br> There is most certainly a role for you in our critical massive adventure.
</p>
</div>
<div class="text" id="artText">
<h1 class="display-3">Critical Mass Art</h1>
<p>Critical Mass is a small volunteer run contemporary arts organization based in Port Hope, Ontario. </p>
<p>We do not receive operating grants or government funding. We rely on small project grants, and corporate sponsorships to help cover the cost of expenses such as artist fees, materials and logistical items needed to run our programs and festivals. This year, we are feeling the pinch of cutbacks to these smaller grant streams. So, we also rely on private support from people like you to make our programs possible! We believe that art is for everyone and should be accessible.</p>
<p>We also believe that artists should be paid a professional wage.</p>
<p>So we strive to provide free or low cost participation in our programs &/or admission to our exhibits and special events.</p>
<p>We work hard to do this because we believe anyone should have the opportunity to participate in or experience the arts and its many benefits such as social inclusion, health and mental wellness.</p>
</div>
<svg id="About" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1399.26 818.51" width="900" height="475">
<defs>
<style>
.cls-1,
.cls-3 {
fill: #fff;
}
.cls-2 {
font-size: 24px;
font-family: AlbertText-Bold, Albert Text;
}
.cls-3,
.cls-4 {
stroke: #1a1a1a;
}
.cls-3,
.cls-4,
.cls-5 {
stroke-miterlimit: 10;
}
.cls-3 {
stroke-width: 8px;
}
.cls-4,
.cls-5 {
fill: none;
stroke-width: 5px;
}
.cls-5 {
stroke: #000;
}
</style>
</defs>
<title>About</title>
<g id="massiveAdventure">
<g id="tab1">
<polygon class="cls-1" points="1088.59 140.38 1088.26 53.38 1396.29 52.49 1362.66 98.1 1394.98 140.49 1088.59 140.38" />
<path d="M1749.3,204l-31.19,42.3-1.33,1.81,1.36,1.79,29.8,39.09-301.87-.11-.32-84L1749.3,204m6-3-312.51.9.34,90L1754,292l-33.47-43.91,34.72-47.1Z" transform="translate(-355.99 -150)" />
</g>
<text class="cls-2" transform="translate(1152.84 91.16) scale(1.05 1)">Critical Massive
<tspan x="27.71" y="28">Adventure</tspan>
</text>
</g>
<g id="massArt">
<g id="tab2">
<polygon class="cls-1" points="859.75 159.2 1166.2 157.57 1129.92 204.63 1161.75 247 859.6 247.34 859.75 159.2" />
<path d="M1519.13,309.09l-33.71,43.72-1.4,1.81,1.37,1.82,29.35,39.06-297.65.34.15-85.15,301.89-1.6m6.12-3-311,1.66-.15,91.14,306.65-.36-33-43.85,37.46-48.59Z" transform="translate(-355.99 -150)" />
</g>
<g id="cmArt">
<text class="cls-2" transform="translate(942.63 208.22) rotate(0.31) scale(0.88 1)">Critical Mass Art</text>
</g>
</g>
<g id="contentBox">
<polygon class="cls-3" points="10.51 54.5 67.01 4 1061.01 4 1096.01 47.5 1105.01 770.5 1063.01 814.5 42.01 810.5 4.01 761.5 10.51 54.5" />
<path class="cls-4" d="M368.62,275.18c18.52-58.12,60.5-103.55,129.69-119.86" transform="translate(-355.99 -150)" />
<path class="cls-4" d="M482.4,961.1c-58.12-18.52-103.55-60.5-119.86-129.7" transform="translate(-355.99 -150)" />
<path class="cls-4" d="M1336.54,961.1c58.12-18.52,103.55-60.5,119.86-129.7" transform="translate(-355.99 -150)" />
<path class="cls-4" d="M1450.31,276.18c-18.52-58.12-60.49-103.55-129.69-119.86" transform="translate(-355.99 -150)" />
<line class="cls-4" x1="1072.01" y1="80" x2="1072.01" y2="747" />
<line class="cls-4" x1="36.01" y1="77" x2="37.01" y2="750" />
</g>
</svg>
</div>