Hello!
I've been trying to find a solution for this issue for the past few hours and couldn't, so I decided to open a topic myself.
So basically, I'm trying to combine two types of tab coding. I'm using this How To as the "pages" and using ul.tabs format as "subtabs" within that content.
Upon reloading the page, everything seems to be working perfectly at first glance. However, I'm getting a lot of issues that I can't understand as soon as I change from one "page" to another.
"Subtab 1" is set as active / default. But when changing "pages", the tab loses its customization. From this -> to this.
When changing pages, the only subtab that maintains the customization is the last one that was manually clicked, and only in the specific page where it was clicked.
If I click on "subtab 2" in Page 1 and then go to Page 2, I will immediately see the content for its own "subtab 2" instead of what should be the default subtab for every page, a.k.a subtab 1.
I know it's confusing but I'm hoping someone has any idea of what's going on here?
Below are the codes I'm using for all of this.
PAGES / THE "HOW TO" TABS SCRIPT:
<script>
function openCity(evt, cityName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none"; }
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", ""); }
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active"; }
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
UL.TABS SCRIPT FOR "SUBTABS":
<script>
$(document).ready(function(){
$("ul.tabss li").click(function(e){
if (!$(this).hasClass("active")) {
var tabNum = $(this).index();
var nthChild = tabNum+1;
$("ul.tabss li.active").removeClass("active");
$(this).addClass("active");
$("ul.tabs li.active").removeClass("active");
$("ul.tabs li:nth-child("+nthChild+")").addClass("active");
}
});
});
</script>
CSS FOR BOTH FORMATS:
/* SUBTABS */
ul.tabss {
list-style-type: none;
padding: 0;
text-align: center;
font-size:9px;
letter-spacing:1px;
text-transform: uppercase; }
ul.tabss li {
display: inline-block;
background-color: #080808;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
margin: 5px;
margin-bottom: 5px;
color: #b77b8b;
text-shadow: none;
font-family: 'Courier Prime', monospace;
font-weight: bold;
letter-spacing: 3px;
cursor: pointer;
border-bottom: 2px solid #b77b8b;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; }
ul.tabss li:hover {
color: #000;
background-color: #b77b8b;
text-shadow: none;
border-bottom: 2px solid #b77b8b;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out; }
ul.tabss li.active {
color: #000;
text-shadow: none;
background-color: #b77b8b;
border-bottom: 2px solid #b77b8b; }
ul.tabs {
list-style-type: none;
margin: 0;
padding: 0; }
ul.tabs li {
display: none; }
ul.tabs li.active {
display: block;}
/* MAIN TABS */
.tab {
list-style-type: none;
padding: 0px;
text-align: center;
font-size:10px; }
.tab a {
background:transparent;
height: 50px;
width: 50px;
display: inline-block;
padding: 0px;
margin: 5px;
border: 0px solid transparent;
outline: none;
border-radius: 50%;
-moz-transition-duration:.7s;
-webkit-transition-duration:.7s;
-o-transition-duration:.7s;
-webkit-filter: blur(0px); }
.tab a:hover {
background:transparent;
height: 50px;
width: 50px;
display: inline-block;
padding: 0px;
margin: 5px;
border: 0px solid transparent;
outline: none;
border-radius: 50%;
-moz-transition-duration:.7s;
-webkit-transition-duration:.7s;
-o-transition-duration:.7s;
-webkit-filter: blur(0px); }
.tab a.active {
background:transparent;
height: 50px;
width: 50px;
display: inline-block;
padding: 0px;
margin: 5px;
border: 0px solid transparent;
outline: none;
border-radius: 50%;
-moz-transition-duration:.7s;
-webkit-transition-duration:.7s;
-o-transition-duration:.7s;
-webkit-filter: blur(0px);
-webkit-filter: grayscale(0%); }
.tab a.active img {
-webkit-filter: grayscale(0%); }
.tab img {
max-width: 50px;
max-height: 50px;
border-radius: 50%;
-webkit-filter: grayscale(70%); }
.tab img:hover {
-webkit-filter: grayscale(0%); }
.tabcontent {
display: none;
padding: 5px;
padding-top: 20px; }
THE HTML:
<div class="tab">
<a class="tablinks" onclick="openCity(event, 'PAGE 1')" title="page 1." id="defaultOpen"><img src="https://static.tumblr.com/yl55q4f/uKVq92olu/011.png"></a>
<a class="tablinks" onclick="openCity(event, 'PAGE 2')" title="page 2."><img src="https://static.tumblr.com/yl55q4f/uKVq92olu/011.png"></a>
</div>
<div id="PAGE 1" class="tabcontent">
<ul class="tabss"><li class="active">tab 1</li> <li>tab 2</li> <li>tab 3</li></ul>
<ul class="tabs">
<li class="active">
TAB 1 SECTION.
</li>
<li>
TAB 2 SECTION.
</li>
<li>
TAB 3 SECTION.
</li>
</ul>
</div>
<div id="PAGE 2" class="tabcontent">
<ul class="tabss"><li class="active">tab 1</li> <li>tab 2</li> <li>tab 3</li></ul>
<ul class="tabs">
<li class="active">
TAB 1 SECTION.
</li>
<li>
TAB 2 SECTION.
</li>
<li>
TAB 3 SECTION.
</li>
</ul>
</div>
Thank you in advance!
