5

我有以下 HTML 标记：

<div id="step1" class="step">
                    <h1>Enter code</h1>
                    <p><input type="text" value="<%= @groupCode %>" name="group_code" class="span3" />
                        <a class="btn btn-primary btn-medium">
                            Next &raquo;
                        </a>
                    </p>
                </div>
                <div id="step2" class="step" style="display: none">
                    <p>Hello World</p>
                </div>

单击链接 ( .btn) 后，我需要显示下一个父 div ( #step2)。我将其设计为注册过程，因此将有多个父 div（均以 step{:id} 命名）

任何帮助深表感谢！

4

3 回答 3

10

你应该能够使用类似的东西：

//This should access the parent (step1), then the next element (step2)
$(this).parent().next()
于 2012-04-16T17:38:29.223 回答
2 
jQuery('.btn').click(function(){
    jQuery(this).closest('.step').next().show();
});
于 2012-04-16T17:39:02.397 回答
2 
$(function(){
  $(".step a.btn").click(function(){
   var item= $(this);
   item.parent().parent().next().show();
  });
});

如果你想隐藏当前一个并显示下一个带有一些淡入淡出效果，你可以这样做

$(function(){   
  $(".step a.btn").click(function(){
   var item= $(this);
      item.parent().parent().fadeOut(400,function(){
        item.parent().parent().next(".step").fadeIn(300);
      });
  });
});

这是一个例子：http: //jsfiddle.net/Jm7fW/15/

于 2012-04-16T17:39:27.877 回答