Я использую jquery smartwizard 4 , который создает пару вкладок, по которым пользователи могут перемещаться. Следующая вкладка появится, когда выбран вариант на текущей вкладке, это прекрасно работает, если вы идете к ней и не возвращаетесь назад.
Но если вы щелкнете пару шагов назад, все будет загружено правильноно содержимое по-прежнему остается внизу, а не под открытой вкладкой.
Примерно так:

Но это то, чтоЯ хочу:

Как мне этого добиться? Проблема в том, что вкладки отделены от содержимого, это моя html-разметка:
<div id="smartwizard">
<ul>
<li><a href="#step-0">Hoes zitzak<br /></a></li>
<li><a href="#step-1">Test zitzak<br /></a></li>
<li><a href="#step-2">Kleur zitzak<br /></a></li>
</ul>
<div>
<div id="step-0" class="">
<form class="" id="step_0_form" method="post">
<div class="tab-content2">
<input type="radio" id="Nylon hoes-Hoes zitzak" name="Hoes zitzak" value="Nylon hoes">
<label for="Nylon hoes-Hoes zitzak">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Nylon hoes">
<p>
<strong>Nylon hoes</strong>
</p>
</div>
</label>
<input type="radio" id="Polyester hoes-Hoes zitzak" name="Hoes zitzak" value="Polyester hoes">
<label for="Polyester hoes-Hoes zitzak">
<div class="afwerking-tab">
<img class="materiaal-image" src="assets/images/custom/noimgstep.jpg" alt="Polyester hoes">
<p>
<strong>Polyester hoes</strong>
</p>
<p>20%</p>
</div>
</label>
</div>
</form>
</div>
<div id="step-1" class="">
<form class="" id="step_1_form" method="post">
<div class="tab-content2">
<input type="radio" id="Test optie 1-Test zitzak" name="Test zitzak" value="Test optie 1">
<label for="Test optie 1-Test zitzak">
<div class="afwerking-tab">
<img class="materiaal-image" src="cms/images/Materialen/materiaal-doek-propes-outdoor1.png" alt="Test optie 1">
<p>
<strong>Test optie 1</strong>
</p>
</div>
</label>
<input type="radio" id="Test optie 2-Test zitzak" name="Test zitzak" value="Test optie 2">
<label for="Test optie 2-Test zitzak">
<div class="afwerking-tab">
<img class="materiaal-image" src="cms/images/Materialen/kendal-optieboom1.png" alt="Test optie 2">
<p>
<strong>Test optie 2</strong>
</p>
</div>
</label>
</div>
</form>
</div>
<div id="step-2" class="">
<form class="" id="step_2_form" method="post">
<div class="tab-content2">
<input type="radio" id="Rood-Kleur zitzak" name="Kleur zitzak" value="Rood">
<label for="Rood-Kleur zitzak">
<div class="afwerking-tab">
<img class="materiaal-image" src="cms/images/Materialen/materiaal-doek-propes-outdoor1.png" alt="Rood">
<p>
<strong>Rood</strong>
</p>
</div>
</label>
</div>
</form>
</div>
</div>
</div>
И это мой jquery на случай, если это может иметь отношение:
$(document).ready(function(){
$('#smartwizard').smartWizard({
lang: {
next: 'Volgende',
previous: 'Vorige'
},
useURLhash: false,
showStepURLhash: false
});
$("#smartwizard").on("change", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
var stepNumber = stepNumber + 1;
var form_data = $("#formsid form").serialize();
$.ajax({
type:'post',
url:"catalog/calcdiv.php",
data:({form_data: form_data}),
success:function(data){
var content = $( $.parseHTML(data) );
$( "#ajaxresult" ).empty().append( content );
// indicate the ajax has been done, release the next step
$("#smartwizard").smartWizard("next");
}
});
})
});