There is an issue with my tabs overlapping each other due to CSS and JavaScript:
<div class="accordionContent">
<div class="menusfondo">
<div class="content">
<ul class="tabs2">
<li><a href="#scheda4" id="uno">INTRODUZIONE</a></li>
<li><a href="#scheda5">FILOSOFIA</a></li>
<li><a href="#scheda6">CASI DI SUCCESSO</a></li>
<li><a href="#scheda7">ULTIME INNOVAZIONI</a></li>
<li><a href="#scheda8">CONTATTI</a></li>
</ul>
<div class="contenitore_tab2">
<div id="scheda4" class="contenuto_tab2">
<h1>title</h1>
<h2>title2</h2>
<p>content <a href="#scheda5">link scheda 5</a>. content</p>
</div>
<div id="scheda5" class="contenuto_tab2">
<h1> title</h1>
<h2> title2</h2>
<p>content</p>
</div>
<div id="scheda6" class="contenuto_tab2">
<h1>title</h1>
<h2>title2 </h2>
<p>content</p></div>
<div id="scheda7" class="contenuto_tab2">
<h1>title</h1>
<h2>title2</h2>
<p>content</p></div>
</div>
</div>
</div>
</div>
</div>
<div id="wrapper2">
<div class="accordionButton uno"><div class="content">
<h1>title</h1>
</div>
<div id="hidden"></div></div>
<div class="accordionContent ">
<div class="menusfondo">
<div class="content">
<ul class="tabs">
<li><a href="#scheda1">INTRODUZIONE</a></li>
<li><a href="#scheda2">FILOSOFIA</a></li>
<li><a href="#scheda3">NEGOZIO ONLINE</a></li>
<li><a onclick="window.open('http://www.eurotesterpen.com/contact','_blank');">CONTATTI</a></li>
</ul>
<div class="contenitore_tab">
<div id="scheda1" class="contenuto_tab">
The issue lies with the anchor within the "scheda4" div. It seems to be coded similarly to the menu links for each tab, but it's not functioning correctly. I'm unsure if it needs to be linked to the JavaScript code to work properly. The JavaScript being used is:
$(document).ready(function() {
$(".contenuto_tab2").hide(); //Hide all contents
$("ul.tabs2 li:first").addClass("active").show(); //Activate the first tab
$(".contenuto_tab2:first").show(); //Show the content of the first tab
$("ul.tabs2 li").click(function() {
$("ul.tabs2 li").removeClass("active"); //Remove all "active" classes
$(this).addClass("active"); //Activate the selected tab
$(".contenuto_tab2").hide(); //Hide all contents
var activeTab = $(this).find("a").attr("href"); //Get the href value of the tab to activate its respective content
$(activeTab).fadeIn(); //Fade in to display the content of the found ID
return false;
});
});
When clicking on the tab for "scheda5", it doesn't display the correct content. There is no effect when clicked, and the page remains unchanged. Any assistance would be greatly appreciated.