Implementation between the select tab?

There are tabs and switch between them
<div id="tabs" class="tabs">
 <ul class="tabs__header">
 <li class="tab"><span>01</span>Ask question</li>
 <li class="tab"><span>02</span>My file</li>
 <li class="tab"><span>03</span>Video 1x1</li>
 <li class="tab"><span>04</span>to Order the webinar</li>
 <li class="tab"><span>05</span>Staff</li>
 <li class="tab"><span>06</span>FAQ</li>
</ul>
<div class='tab-content'></div>
<div class='tab-content'></div>
<div class='tab-content'></div>
<div class='tab-content'></div>
 </div>


here's a js
"use strict";
var tab; 
var tabContent;


window.onload=function() {
tabContent=document.getElementsByClassName('tab-content');
tab=document.getElementsByClassName('tab');

hideTabsContent(1);

}

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;
}
}
}
}

hideTabsContent function(a) {
 for (var i=a; i<tabContent.length; i++) {
tabContent[i].classList.remove('show');
tabContent[i].classList.add("hide");

}
}

showTabsContent function(b){
 if (tabContent[b].classList.contains('hide')) {
hideTabsContent(0);
tabContent[b].classList.remove('hide');
tabContent[b].classList.add('show');
}
}

in the tablet version it is necessary to push instead of the usual tabs select by clicking on the elements of which you select the desired tab
5df8e20459ea4398924451.png
When you add the select the tabs stop working,so the question is,what should be changed in the script or anyone have examples of implementing such a thing?

script selekta for customization here like this
'use strict'

$('select').each(function(){
 var $this = $(this), numberOfOptions = $(this).children('option').length;

 $this.addClass('select-hidden'); 
 $this.wrap('<div class="select"></div>');
 $this.after('<div class="select-styled "></div>');

 var $styledSelect = $this.next('div.select-styled');
$styledSelect.text($this.children('option').eq(0).text());

 var $list = $('<ul />', {
 'class': 'select-options'
}).insertAfter($styledSelect);

 for (var i = 0; i < numberOfOptions; i++) {
 $('<li />', {
 text: $this.children('option').eq(i).text(),
 rel: $this.children('option').eq(i).val()
}).appendTo($list);
}

 var $listItems = $list.children('li');

 $styledSelect.click(function(e) {
e.the stoppropagation();
$('div.select-styled.active').not(this).each(function(){
$(this).removeClass('active').next('ul.select-options').hide();
});
$(this).toggleClass('active').next('ul.select-options').toggle();
});

 $listItems.click(function(e) {
e.the stoppropagation();
$styledSelect.text($(this).text()).removeClass('active');
$this.val($(this).attr('rel'));
$list.hide();
//console.log($this.val());
});

 $(document).click(function() {
$styledSelect.removeClass('active');
$list.hide();
});

});
April 3rd 20 at 18:23
0 answer

Find more questions by tags JavaScriptjQueryHTML