Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>Таб</title>
- <link rel="stylesheet" type="text/css" href="css.css">
- </head>
- <body>
- <div class="tabs">
- <header>
- <div class="tab active" data-tab="1">Почетна</div>
- <div class="tab" data-tab="2">Друга</div>
- <div class="tab" data-tab="3">Трећа</div>
- <div class="tab" data-tab="4">Трећа</div>
- </header>
- <main>
- <div class="active" id="tab1">
- Почетна страна и неки садржај за то. Почетна страна и неки садржај за то.Почетна страна и неки садржај за то. Почетна страна и неки садржај за то
- </div>
- <div id="tab2">
- Друга страна и неки садржај за то.Друга страна и неки садржај за то.Друга страна и неки садржај за то.Друга страна и неки садржај за то.Друга страна и неки садржај за то.Друга страна и неки садржај за то
- </div>
- <div id="tab3">
- трећи таб страна и неки садржај за то.Друга страна и неки садржај за то.Друга страна и неки садржај за то.Друга страна и неки садржај за то.Друга страна и неки садржај за то.Друга страна и неки садржај за то
- </div>
- </main>
- </div>
- <script src="js.js"></script>
- </body>
- </html>
- var tab = document.querySelectorAll('.tab');
- tabs.addEventListener('click' , function(){
- var removeActive = document.querySelector('.tabs header div.active');
- removeActive.classList.remove('active');
- this.classList.add('active');
- var removeActiveContent = document.querySelector('main .active');
- if (removeActiveContent !== null){
- removeActiveContent.classList.remove('active');
- var sadrzaj = document.querySelector('#tab'+ this.dataset.tab);
- sadrzaj.classList.add('active');
- }
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement