Currently, I am facing a frustrating issue in finding a suitable solution.
My website uses tabs that utilize the UL, LI system, similar to most tab systems found in tutorials.
The problem arises because the javascript on my site interferes with using the UL, LI system within my content.
This javascript adds an active class to a selected tab and removes it when switching to another tab, thereby causing all LI elements to inherit the "display:none;" property.
I am seeking advice on the best approach to resolve this dilemma.
Below is the javascript section:
$(function () {
var container = $('.tabs-container'),
tabs = container.find('.tabs li'),
links = tabs.find('a'),
contents = container.find('.contents li');
links.click(function (e) {
e.preventDefault();
});
tabs.on('click', function () {
var $this = $(this),
$id = $this.find('a').attr('href'),
$target = container.find('.contents ' + $id);
if ($this.hasClass('active'))
return;
tabs.removeClass('active');
$this.addClass('active');
contents.removeClass('active').hide();
$target.fadeIn(500).addClass('active');
});
});
For reference, here is the JSFiddle link with the code (https://jsfiddle.net/f6jLt91d/)
Upon inspecting the code, you will notice that the initial tab displays a list properly only after manually adding the "display:inline" rule to the style. However, switching between tabs causes the list to disappear upon returning to the first tab.
I believe there may be a minor oversight or mistake causing this issue, but despite spending the last three days troubleshooting, I have yet to find a suitable resolution. Any suggestions?