Скрипт слайдера сам по себе работает, но плюс любой другой js код не работает, пожалуйста помогите?
Full html code, слайдер и звездочка работает, а дальше хочу добавить вкладки, но любой другой скрипт код не работает плюс слайдер и звездочка тоже перестала работать после добавление какого либо скрипта
<!DOCTYPE html>
<html lang="eng">
<head>
<title>Surfers CO</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-sacle = 1.0">
<meta http-equiv="X-UA-Compatible" content = "ie=edge">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<header class="header">
<div class="container">
<div class="header__top">
<nav class="menu">
<div class="logo">
<a href="">
Surfers CO
</a>
</div>
<ul class="menu__list">
<li class="menu__list-item">
<a class="menu__list-link" href="">
BOARDS
</a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href="">
ACCESSORIES
</a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href="">
BLOG
</a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href="">
TECHNOLOGY
</a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href="">
TEAM
</a>
</li>
<li class="menu__list-item">
<a class="menu__list-link" href="">
DEALERS
</a>
</li>
</ul>
</nav>
<div class="header__media">
<a class="header__facebook" href="">
<img src="images/facebook.png">
</a>
<a class="header__instagram" href="">
<img src="images/instagram.png">
</a>
<a class="header__email" href="">
<img src="images/mail.png">
</a>
</div>
</div>
<h1 class="header__text">
Ride every wave as if it's your last
<br><span class="span">
We love the motion of the ocean
</span>
</h1>
<div class="container_box">
<div class="surfers_sliders">
<div class="w3-content" style="max-width:550px; max-height: 600px padding:auto; text-align: justify;">
<img class="mySlides" id="display_none" src="images/board.jpg" style="width:350px; height: 450px; margin-top: 75px; margin-bottom: 75px; margin-left: auto; margin-right: auto; display: inherit;">
<img class="mySlides" id="display_none" src="images/board2.jpg" style="width:350px; height: 450px; margin-top: 75px; margin-bottom: 75px;margin-left: auto; margin-right: auto;display:none">
<img class="mySlides" id="display_none" src="images/board3.jpg" style="width:350px; height: 450px; margin-top: 75px; margin-bottom: 75px; margin-left: auto; margin-right: auto;display:none">
<img class="mySlides" id="display_none" src="images/board4.jpg" style="width:350px; height: 450px; margin-top: 75px; margin-bottom: 75px; margin-left: auto; margin-right: auto; display:none">
<div class="slider_mini">
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="images/board.jpg" onclick="currentDiv(1)">
</div>
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="images/board2.jpg" onclick="currentDiv(2)">
</div>
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="images/board3.jpg" onclick="currentDiv(3)">
</div>
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="images/board4.jpg" onclick="currentDiv(4)">
</div>
</div>
</div>
</div>
<div class="description_sliders">
<div class="description_title">
JR Surfboards The Donny Stoker <br> Yellow/Green Rail Fade
</div>
<div class="rating">
<div class="rating-item" data-rate="5" id="star-five"></div>
<div class="rating-item" data-rate="4" id="star-five"></div>
<div class="rating-item" data-rate="3" id="star-five"></div>
<div class="rating-item" data-rate="2" id="star-five"></div>
<div class="rating-item active" data-rate="1" id="star-five"></div>
</div>
<div class="description_tabs" id="tabs">
<div class="tab whiteborder">Descriptions</div>
<div class="tab">Features</div>
<div class="tab">Dimensions</div>
<div class="tabContent">1</div>
<div class="tabContent">2</div>
<div class="tabContent">3</div>
</div>
</div>
</div>
</div>
</div>
</header>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
скрипт слайдера и звездочки
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName( "mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-opacity-off";
}
(function(){
var container = document.querySelector('.rating');
var items = container.querySelectorAll('.rating-item')
container.onclick = function(e) {
if( ! e.target.classList.contains('active') ){
items.forEach(function(item){
item.classList.remove('active');
});
e.target.classList.add('active');
}
}
})();
вот это я добавил
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');
}
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');
}
}