index.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Табы</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="tabs">
<div class="tab whiteborder">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
<div class="tabContent">Текст 1</div>
<div class="tabContent">Текст 2</div>
<div class="tabContent">Текст 3</div>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
#tabs .tab {
display: inline-block;
padding: 5px 10px;
cursor: pointer;
position: relative;
z-index: 5;
}
#tabs .whiteborder {
border: 1px solid #707070;
border-bottom: 1px solid #fff;
border-radius: 3px 3px 0 0;
}
#tabs .tabContent {
width: 300px;
height: 60px;
border: 1px solid #707070;
position: relative;
z-index: 1;
padding: 10px;
border-radius: 0 0 3px 3px;
}
#tabs .hide {
display: none;
}
#tabs .show{
display: block;
}
script.js
var tab;
var tabContent;
window.onload = function(){
tabContent = document.getElementsByClassName('tabContent');
tab = document.getElementsByClassName('tab');
hideTabsContent(1);
}
function hideTabsContent(a) {
for(var i = a; i < tabContent.length; i++) {
tabContent[i].classList.remove('show');
tabContent[i].classList.add('hide');
tab[i].classList.remove('whiteborder');
}
}
// https://htmlhook.ru/classlist.html
// Свойство classList получает доступ к атрибуту class добавленного к элементу HTML.
// Манипуляции со строками позволяют добавлять, изменять и удалять классы современным способом.
/*
Свойство event.target содержит элемент, на котором сработало событие.
Это не тот элемент, к которому был привязан обработчик этого события,
а именно самый глубокий тег, на который непосредственно был, к примеру, совершен клик.
*/
document.getElementById('tabs').onclick = function(event){
var target = event.target;
if(target.className == 'tab'){
for(var i = 0; i < tab.length; i++) {
if(target == tab[i]) {
showTabsContent(i);
break;
}
}
}
}
function showTabsContent(b) {
if(tabContent[b].classList.contains('hide')) {
hideTabsContent(0);
tab[b].classList.add('whiteborder');
tabContent[b].classList.remove('hide');
tabContent[b].classList.add('show');
}
}
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Табы</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="tabs">
<div class="tab whiteborder">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
<div class="tabContent">Текст 1</div>
<div class="tabContent">Текст 2</div>
<div class="tabContent">Текст 3</div>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
#tabs .tab {
display: inline-block;
padding: 5px 10px;
cursor: pointer;
position: relative;
z-index: 5;
}
#tabs .whiteborder {
border: 1px solid #707070;
border-bottom: 1px solid #fff;
border-radius: 3px 3px 0 0;
}
#tabs .tabContent {
width: 300px;
height: 60px;
border: 1px solid #707070;
position: relative;
z-index: 1;
padding: 10px;
border-radius: 0 0 3px 3px;
}
#tabs .hide {
display: none;
}
#tabs .show{
display: block;
}
script.js
var tab;
var tabContent;
window.onload = function(){
tabContent = document.getElementsByClassName('tabContent');
tab = document.getElementsByClassName('tab');
hideTabsContent(1);
}
function hideTabsContent(a) {
for(var i = a; i < tabContent.length; i++) {
tabContent[i].classList.remove('show');
tabContent[i].classList.add('hide');
tab[i].classList.remove('whiteborder');
}
}
// https://htmlhook.ru/classlist.html
// Свойство classList получает доступ к атрибуту class добавленного к элементу HTML.
// Манипуляции со строками позволяют добавлять, изменять и удалять классы современным способом.
/*
Свойство event.target содержит элемент, на котором сработало событие.
Это не тот элемент, к которому был привязан обработчик этого события,
а именно самый глубокий тег, на который непосредственно был, к примеру, совершен клик.
*/
document.getElementById('tabs').onclick = function(event){
var target = event.target;
if(target.className == 'tab'){
for(var i = 0; i < tab.length; i++) {
if(target == tab[i]) {
showTabsContent(i);
break;
}
}
}
}
function showTabsContent(b) {
if(tabContent[b].classList.contains('hide')) {
hideTabsContent(0);
tab[b].classList.add('whiteborder');
tabContent[b].classList.remove('hide');
tabContent[b].classList.add('show');
}
}
Комментариев нет:
Отправить комментарий