Есть несколько вкладок (табов) я пытаюсь сделать, что бы они были все изначально заблокированы и переход по ним осуществлялся только по кнопкам "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();
}
Оборудование для ресторана: новинки профессиональной кухонной техники
Частный дом престарелых в Киеве: комфорт, забота и профессиональный уход
Есть select в котором есть optionКак сделать добавление стилей тому option в котором только одна точка?
Есть несколько элементов в строкеПри скрытии (display:none) одного из них - остальные смещаются влево
Разбираюсь с чужим js-кодом, которым раньше не занималсяЕсть строка на JSP-странице: