Переход по вкладкам, на кнопки

179
30 декабря 2018, 13:20

Есть несколько вкладок (табов) я пытаюсь сделать, что бы они были все изначально заблокированы и переход по ним осуществлялся только по кнопкам "continue" "back", при этом когда переход происходит вперед, предыдущим вкладкам присваивается класс, который показывает, что эти вкладки уже заполнены. Прошу помочь разобраться в этой сложной ( для меня) задачке.

<script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery- 
validate/1.17.0/jquery.validate.min.js"></script>
<div class="new_ico_tabs">
    <ul class="new_ico_tabs_profile">
        <li class="tab_new_ico_project_details">
            <a href="#new_ico_project" class="ivory" data-toggle="tab">Project details</a>
        </li>
        <li class="tab_new_ico_stage">
            <a href="#new_ico_stage" class="ivory" data-toggle="tab">Stage</a>
        </li>
        <li class="tab_new_ico_use">
            <a href="#new_ico_use" class="ivory" data-toggle="tab">Use of funds</a>
        </li>
    </ul>
    <form id="new_ico_project_form"> 
        <div id="new_ico_project" class="cart-item"> 
            <input type="text" name="contact_name" class="required">
            <div class="continue_btn right">
                <button class="cart-next" type="button">CONTINUE > </button>
            </div>
        </div>
        <div id="new_ico_stage" class="cart-item"> 
            <input type="text" name="contact_email" class="required">
            <div class="back_btn left">
                <button class="cart-back" type="button"> <  BACK</button>
            </div>
            <div class="continue_btn">
                <button class="cart-next" type="button">CONTINUE > </button>
            </div>
        </div>
        <div id="new_ico_use" class="cart-item">
            <input type="text" name="stage" class="required">
            <div class="back_btn">
                <button class="cart-back" type="button"> <  BACK</button>
            </div>
            <div class="continue_btn">
                <button class="cart-next" type="button">CONTINUE > </button>
            </div>
        </div>
    </form>
</div>

$( function() {
$( ".new_ico_tabs" ).tabs();
} );
$("#new_ico_project_form").validate({
    rules: {
    contact_name: "required",
    contact_email: "required",
    stage: "required"
});
$('ul.new_ico_tabs_profile li a[data-toggle="tab"]').on('show.bs.tab', 
function (e) {
    var $target = $(e.target);
    if ($target.parent().hasClass('disabled')) {
        return false;
    }
});
$(".new_ico_tabs .cart-next").click(function (e) {
    var form = $(this).closest('.cart-item');
    if ($('#new_ico_project_form').validate().form() === false) return false;
    var $active = $('ul.new_ico_tabs_profile li');
    $active.addClass('check');
    $active.next().removeClass('disabled');
    nextTab($active);
});
$(".new_ico_tabs .cart-back").click(function (e) {
    var $active = $('ul.new_ico_tabs_profile li');
    prevTab($active);
    function nextTab(elem) {
    $(elem).next().find('a[data-toggle="tab"]').click();    
}
function prevTab(elem) {
    $(elem).prev().find('a[data-toggle="tab"]').click();
}
READ ALSO
Выборка jQuery. Выбор элементов

Выборка jQuery. Выбор элементов

Есть select в котором есть optionКак сделать добавление стилей тому option в котором только одна точка?

205
Анимация перемещения при realyout

Анимация перемещения при realyout

Есть несколько элементов в строкеПри скрытии (display:none) одного из них - остальные смещаются влево

168
Прошу проконсультировать по JS-коду

Прошу проконсультировать по JS-коду

Разбираюсь с чужим js-кодом, которым раньше не занималсяЕсть строка на JSP-странице:

138