Upon reviewing your code, I have identified three main issues that need to be addressed.
- It seems that jsfiddle does not support the use of the onclick attribute. I encountered difficulties in getting it to work properly. Converting your code into an HTML document resolved this issue.
- The
removeAttribute('class', 'tabactive');
method was returning undefined and causing the code to break. It would be better to simply change the element to the tab class rather than removing it entirely.
- There was a missing parameter in the tabclick function when it was called in the onclick attribute. I have modified the function so that it now returns the id of the tab div that you want to display.
Here is the updated tabClick function:
function tabClick(tab, tabContent) {
var newcontent=document.getElementById(tabContent);
document.getElementsByClassName('active')[0].removeAttribute('class', 'active');
tab.setAttribute('class', 'active');
document.getElementsByClassName('tabactive')[0].setAttribute('class', 'tab');
newcontent.setAttribute('class', 'tabactive');
}
Here is the revised HTML:
<div class="tabs">
<ul class="tab-links">
<li class="active" onclick="javascript:tabClick(this,'tab1')"><a href="#tab1">Tab #1</a></li>
<li onclick="javascript:tabClick(this,'tab2')"><a href="#tab2">Tab #2</a></li>
<li onclick="javascript:tabClick(this,'tab3')"><a href="#tab3">Tab #3</a></li>
<li onclick="javascript:tabClick(this,'tab4')" ><a href="#tab4">Tab #4</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tabactive">
<p>Tab #1 content goes here!</p>
<p>lol</p>
</div>
<div id="tab2" class="tab">
<p>Tab #2 content goes here!</p>
<p></p>
</div>
<div id="tab3" class="tab">
<p>Tab #3 content goes here!</p>
<p>lol</p>
</div>
<div id="tab4" class="tab">
<p>Tab #4 content goes here!</p>
<p>lol</p>
</div>
</div>