Хорошо, вот очень упрощенная версия того, чего я пытаюсь достичь.
Первый слой вкладок [футов]: 1, 2, 3, 4.
Второй уровень: [футы] a, [футы] b, [футы] c, [футы] d. Некоторые из них будут скрыты.
Когда пользователь выбирает первую вкладку, второй слой вкладок должен быть перезагружен / загружен в соответствии с первой выбранной вкладкой и содержимым HTML-файла.
Значения, указывающие, какие вкладки будут показаны и скрыты, взяты из html-файла. Я не уверен, как его отформатировать.
Например: я открываю страницу и выбираю вкладку 2.
Будет загружено содержимое вкладки 2, открывая другой набор вкладок, уникальный для вкладки 2. В html-файле указывается, что вкладки 2a, 2b и 2d должны отображаться, а остальные вкладки скрыты.
Извините, если вы не понимаете, я действительно пытаюсь понять, с чего начать.
Вот некоторый грязный существующий код:
<div id="firsttabs" class="firsttabs">
<ul>
<li><a href="#1" onclick="event.preventDefault();"><img id="1" style="display:none" src="images/1.png"/></a></li>
<li><a href="#2" onclick="event.preventDefault();"><img id="2" style="display:none" src="images/2.png" /></a></li>
<li><a href="#3" onclick="event.preventDefault();"><img id="3" style="display:none" src="images/3.png" /></a></li>
<li><a href="#4" onclick="event.preventDefault();"><img id="4" style="display:none" src="images/4.png" /></a></li>
</ul>
</div>
<div id="secondtabs">
<div id="1">
<div id="secondtabs1" class="secondtabs1">
<ul>
<li><a href="#1a" onclick="event.preventDefault()"><img style="display:none" id="1a" src="images/1a.png" /></a></li>
<li><a href="#2a" onclick="event.preventDefault()"><img style="display:none" id="2a" src="images/2a.png" /></a></li>
<li><a href="#3a" onclick="event.preventDefault()"><img style="display:none" id="3a" src="images/3a.png"/></a></li>
<li><a href="#4a" onclick="event.preventDefault()"><img style="display:none" id="4a" src="images/4a.png"/></a></li>
</ul>
</div>
<div id="content">
<div id="1a">Content1a</div>
<div id="2a">Content2a</div>
<div id="3a">Content3a</div>
<div id="4a">Content4a</div>
<div id="5a">Content5a</div>
</div>
</div>
<div id="2">Content2</div>
<div id="secondtabs2" class="secondtabs2">
<ul>
<li><a href="#1a" onclick="event.preventDefault()"><img style="display:none" id="1a" src="images/1a.png" /></a></li>
<li><a href="#2a" onclick="event.preventDefault()"><img style="display:none" id="2a" src="images/2a.png" /></a></li>
<li><a href="#3a" onclick="event.preventDefault()"><img style="display:none" id="3a" src="images/3a.png"/></a></li>
<li><a href="#4a" onclick="event.preventDefault()"><img style="display:none" id="4a" src="images/4a.png"/></a></li>
</ul>
</div>
<div id="content">
<div id="1b">Content1a</div>
<div id="2b">Content2a</div>
<div id="3b">Content3a</div>
<div id="4b">Content4a</div>
<div id="5b">Content5a</div>
</div>
<div id="3">More tabs...</div>
<div id="4">More tabs...</div>
</div>
</div>
Как видите, это не идеально.
РЕДАКТИРОВАТЬ: игнорировать любые ошибки HTML в этом коде, как я только что сделал это в целях демонтажа.