Looking to create a tabbed area where content changes based on the tab clicked. The Javascript function switches the link class to active upon clicking. However, struggling to change the color of the active tab beyond the first click.
Tried various solutions but unable to pinpoint the issue causing it not to work as intended.
CSS:
/* hide inactive tabs */
#content_2, #content_3, #content_4, #content_5 {
display: none;
}
/* list styling */
ul.tabs li {
list-style: none;
display: inline-block;
}
/* inactive links */
ul.tabs li a {
background-color: black;
display: inline-block;
}
/* active links */
ul.tabs li a.active {
background-color: pink;
display: inline-block;
}
HTML:
<div class="all-interact">
<h1>Title</h1>
<div class="inner-interact">
<ul class="tabs">
<li><a href="javascript:tabSwitch('tab_1', 'content_1');" id="tab_1" class="active">tab 1</a></li>
<li><a href="javascript:tabSwitch('tab_2', 'content_2');" id="tab_2">tab 2</a></li>
<li><a href="javascript:tabSwitch('tab_3', 'content_3');" id="tab_2">tab 3</a></li>
<li><a href="javascript:tabSwitch('tab_4', 'content_4');" id="tab_2">tab 4</a></li>
<li><a href="javascript:tabSwitch('tab_5', 'content_5');" id="tab_2">tab 5</a></li>
</ul>
<div class="tab-content" id="content_1">
<p>tab 1 content</p>
</div>
<div class="tab-content" id="content_2">
<p>tab 2 content</p>
</div>
<div class="tab-content" id="content_3">
<p>tab 3 content</p>
</div>
<div class="tab-content" id="content_4">
<p>tab 4 content</p>
</div><!--content4-->
<div class="tab-content" id="content_5">
<p>tab 5 content</p>
</div><!--content5-->
</div>
</div>
Javascript:
function tabSwitch(new_tab, new_content) {
document.getElementById('content_1').style.display = 'none';
document.getElementById('content_2').style.display = 'none';
document.getElementById('content_3').style.display = 'none';
document.getElementById('content_4').style.display = 'none';
document.getElementById('content_5').style.display = 'none';
document.getElementById(new_content).style.display = 'block';
document.getElementById('tab_1').className = '';
document.getElementById('tab_2').className = '';
document.getElementById('tab_3').className = '';
document.getElementById('tab_4').className = '';
document.getElementById('tab_5').className = '';
document.getElementById(new_tab).className = 'active';
}