Created
May 28, 2024 18:59
-
-
Save 7daysofrain/39945c0d81a1168db7f1dc91c2cc9d4b to your computer and use it in GitHub Desktop.
SimpleTabs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html class="no-js" lang="es"> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>anim</title> | |
<link href="css/ws10.css" rel="stylesheet"/> | |
<style> | |
.playground{ | |
display: flex; | |
height: 100vh; | |
justify-content: flex-start; | |
align-items: flex-start; | |
flex-direction: column; | |
background-color: lightgray; | |
padding: 10px; | |
} | |
:root { | |
--time-base: 1s; | |
--time-scale: 1; | |
--animation-time: calc(var(--time-base) * var(--time-scale)); | |
--super-fast-anim: calc(var(--animation-time) * 0.2); | |
--fast-anim: calc(var(--animation-time) * 0.3); | |
--medium-anim: calc(var(--animation-time) * 0.5); | |
--slow-anim: var(--animation-time); | |
} | |
.tabs{ | |
list-style-type: none; | |
padding: 0; | |
margin: 0; | |
display: flex; | |
} | |
.tabs li{ | |
margin: 0; | |
padding: 0; | |
width: 150px; | |
height: 30px; | |
text-align: center; | |
border: 1px solid white; | |
font-size: 20px; | |
line-height: 30px; | |
} | |
.tabs a{ | |
display: block; | |
text-decoration: none; | |
} | |
.tabs a.selected { | |
background-color: white; | |
color: #e60000; | |
height: 30px; | |
} | |
.card { | |
display: none; | |
box-shadow: none; | |
border-radius: 0; | |
} | |
.card.visible { | |
display: block; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="playground"> | |
<ul class="tabs"> | |
<li><a href="#tab1" id="tab1">Tab 1</a></li> | |
<li><a href="#tab2" id="tab2" class="selected">Tab 2</a></li> | |
<li><a href="#tab3" id="tab3">Tab 3</a></li> | |
<li><a href="#tab4" id="tab4">Tab 4</a></li> | |
</ul> | |
<article class="ws10-c-card card" id="card1"> | |
<h1>Contentido tab 1</h1> | |
</article> | |
<article class="ws10-c-card card visible" id="card2"> | |
<h1>Contentido tab 2</h1> | |
</article> | |
<article class="ws10-c-card card" id="card3"> | |
<h1>Contentido tab 3</h1> | |
</article> | |
<article class="ws10-c-card card"id="card4"> | |
<h1>Contentido tab 4</h1> | |
</article> | |
</div> | |
<script> | |
function limpiar() { | |
const tabs = document.querySelectorAll('.tabs a'); | |
for(let i = 0 ; i < tabs.length ; i++) { | |
tabs[i].classList.remove('selected') | |
} | |
const contents = document.querySelectorAll('.card'); | |
for(let i = 0 ; i < contents.length ; i++) { | |
contents[i].classList.remove('visible') | |
} | |
} | |
function onTab1Click() { | |
limpiar(); | |
tab1.classList.add("selected"); | |
const card1 = document.querySelector("#card1") | |
card1.classList.add("visible"); | |
} | |
const tab1 = document.querySelector("#tab1"); | |
tab1.addEventListener("click", onTab1Click); | |
function onTab2Click() { | |
limpiar(); | |
tab2.classList.add("selected"); | |
const card2 = document.querySelector("#card2") | |
card2.classList.add("visible"); | |
} | |
const tab2 = document.querySelector("#tab2"); | |
tab2.addEventListener("click", onTab2Click); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment