Показывать содержимое каждого шага под текущим активным шагом, а не под всеми шагами в jquery smartwizard 4 - PullRequest
0 голосов
/ 30 октября 2019

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

Но если вы щелкнете пару шагов назад, все будет загружено правильноно содержимое по-прежнему остается внизу, а не под открытой вкладкой.

Примерно так:

enter image description here

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

enter image description here

Как мне этого добиться? Проблема в том, что вкладки отделены от содержимого, это моя 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");
        }
      });
    })
  });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...