<div class="css-tab">
<ul>
<li><a href="#div-1">Home</a></li>
<li><a href="#div-2">Services</a></li>
<li><a href="#div-3">Portfolio</a></li>
<li><a href="#div-4">Team</a></li>
<li><a href="#div-5">Contact</a></li>
</ul>
<div class="div-area">
<div id="div-1" class="divs">
<h2>Home</h2>
<div>Collaboratively deploy cutting-edge niche markets after client-centric data. Completely formulate B2B customer service after market-driven e-markets. Appropriately predominate team driven.</div>
</div>
<div id="div-2" class="divs">
<h2>Services</h2>
<div>Seamlessly seize collaborative e-tailers rather than superior supply chains. Phosfluorescently negotiate client-focused resources with high-quality users. Interactively incubate error-free customer.</div>
</div>
<div id="div-3" class="divs">
<h2>Portfolio</h2>
<div>Objectively network virtual leadership skills after state of the art leadership. Seamlessly e-enable compelling best practices and intermandated bandwidth. Authoritatively.</div>
</div>
<div id="div-4" class="divs">
<h2>team</h2>
<div>Uniquely leverage other's resource maximizing ROI through professional networks. Dynamically provide access to cost effective mindshare rather than 24/7 process.</div>
</div>
<div id="div-5" class="divs">
<h2>contact</h2>
<div>Collaboratively reintermediate wireless services whereas next-generation initiatives. Credibly redefine high-payoff bandwidth rather than orthogonal bandwidth. Assertively generate economically sound ROI.</div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style-type: none;
display: flex;
justify-content: center;
gap: 5px;
padding: 0;
margin-top: 30px;
}
a {
text-decoration: none;
}
ul a {
display: block;
font-family: sans-serif;
font: 18px;
padding: 10px 35px;
background: #333;
color: #ccc;
border-radius: 5px;
transition: all .3s ease;
}
ul a[href="#div-2"] {
background: #ccc;
color: #333;
}
.css-tab:has([id^="div"]:target) ul a {
background: #333;
color: #ccc;
}
.css-tab:has(#div-1:target) ul a[href="#div-1"],
.css-tab:has(#div-2:target) ul a[href="#div-2"],
.css-tab:has(#div-3:target) ul a[href="#div-3"],
.css-tab:has(#div-4:target) ul a[href="#div-4"],
.css-tab:has(#div-5:target) ul a[href="#div-5"] {
background: #ccc;
color: #333;
}
.div-area {
position: relative;
}
.divs {
position: absolute;
top: 0;
left: 50%;
transform: translatex(-50%);
width: min(100% - 20px, 630px);
margin: 20px auto;
padding: 30px;
background: #f1f1f1;
color: #333;
font-family: sans-serif;
border-radius: 10px;
max-height: 1000px;
overflow: hidden;
}
.divs:not(:nth-child(2)),
.div-area:has(.divs:target) .divs:not(:target){
opacity: 0;
visibility: hidden;
transition: all .3s ease 0s;
}
.divs:target {
opacity: 1;
visibility: visible;
transition: all .3s ease .15s;
}
.divs h2 {
text-transform: uppercase;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
margin-bottom: 10px;
}
.divs div {
font: 16px;
line-height: 25px;
font-weight: 600;
color: #666
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.