模态表单选项卡导航

时间:2014-01-18 22:42:12

标签: javascript jquery

我无法弄清楚我做错了什么。这是一个看示例的链接。 http://atozcognac.com/hotel/form/# 我的上一页和下一页按钮有效,但如果用户按上一个或下一个,我也无法弄清楚如何更改标签。 感谢您的时间。 $(文件)。就绪(函数(){

//When someone clicks on the navigation links
$('.nav li').click(function(e){
    $('.nav li').attr('id', ''); //make all navtabs inactive
    $(this).attr('id', 'activetab'); //make the one we clicked active

    //hide all of the fieldsets
    $('fieldset').attr('class', 'myHidden');

    whichitem=$(this).attr('title'); //get the title of the nav we clicked

    //make the class of what we cleared not hidden
    $("fieldset[title='"+whichitem+"']").attr('class', ''); 
});


//When someone clicks on the previous button
$('.prev').click(function(e){
    var listItem = document.getElementById('activetab'); //find out which navtab is active
    whichOne=$('li').index(listItem); //get the index of the navtab

    $('.nav li').attr('id', ''); //make all the navtabs inactive
    $(".nav li:eq("+(whichOne-1)+")").attr('id', 'activetab'); //make previous tab active

    $('fieldset').attr('class', 'myHidden'); //hide all the fieldsets
    $("fieldset:eq("+(whichOne-1)+")").attr('class', ''); //show the previous fieldset
});


//When someone clicks on the next button
$('.next').click(function(e){
    var listItem = document.getElementById('activetab'); //find out which navtab is active
    whichOne=$('li').index(listItem); //get the index of the navtab

    $('.nav li').attr('id', ''); //make all the navtabs inactive
    $(".nav li:eq("+(whichOne+1)+")").attr('id', 'activetab'); //make next tab active

    $('fieldset').attr('class', 'myHidden'); //hide all the fieldsets
    $("fieldset:eq("+(whichOne+1)+")").attr('class', ''); //show the next fieldset
});
   });

1 个答案:

答案 0 :(得分:1)

您可以触发click事件并使用您已在Click侦听器中实现的逻辑。我会使用课程activetab而不是ID。

$(document).ready(function(){
//When someone clicks on the navigation links
$('.nav li').click(function(e){
    $('.nav li').removeClass("activetab"); //make all navtabs inactive
    $(this).addClass("activetab"); //make the one we clicked active

    //hide all of the fieldsets
    $('fieldset').addClass("myHidden");

    var whichitem=$(this).attr('title'); //get the title of the nav we clicked

    //make the class of what we cleared not hidden
    $("fieldset[title='"+whichitem+"']").removeClass("myHidden");
});


//When someone clicks on the previous button
$('.prev').click(function(e){
    // trigger the click
    $(".activetab").prev().click();
});


//When someone clicks on the next button
$('.next').click(function(e){
    // trigger the click
    $(".activetab").next().click();
});
});