使用jQuery和css隐藏/显示所选表单

我尝试根据用户的选择制作一个jQuery函数来隐藏/显示表单!

这是我的代码,你会更好地理解。

我的CSS代码:

 .joinForm { width: 55%; position: relative; height: 396px;} #noneForm { background: url("../img/ccard-none.jpg") no-repeat scroll 0 0 #FFF; height:396px; width:616px; position: absolute; top: 0; display: block; } #mastercardForm { background: url("../img/mastercard-form.jpg") no-repeat scroll 0 0 #FFF; height:396px; width:616px; position: absolute; top: 0; display: none; } #visaForm { background: url("../img/visa-form.jpg") no-repeat scroll 0 0 #FFF; height:396px; width:616px; position: absolute; top: 0; display: none; } #discoverForm { background: url("../img/discover-form.jpg") no-repeat scroll 0 0 #FFF; height:396px; width:616px; position: absolute; top: 0; display: none; } 

和jQuery代码(@ 8y5)

 $('#joinChoice a').click(function (e) { e.preventDefault(); var $this = $(this); var i = 0; // Reset others var $links = $this.siblings(); $links.removeClass('on'); $links.each(function(linkEl) { $( '#'+$(linkEl).data('form-id') ).hide(); }); // Activate user choice.. $this.addClass('on') $('#'+$this.data('form-id')).show(); }); 

试试这个

 $('#joinChoice a').click(function (e) { e.preventDefault(); var $this = $(this); var i = 0; // Reset others var $links = $this.siblings(); $links.removeClass('on'); $links.each(function(linkEl) { $( '#'+$(linkEl).data('form-id') ).hide(); }); // Activate user choice.. $this.addClass('on') $('#'+$this.data('form-id')).show().siblings().hide(); }); 

小提琴

要么

 $('#joinChoice a').click(function (e) { e.preventDefault(); var $this = $(this); $(this).addClass('on').siblings().removeClass('on') $('#'+$this.data('form-id')).show().siblings().hide(); }); 

小提琴

我个人更喜欢做这样的事情

 

JQUERY

 function openForm(formname) { $('.joinForm').hide(); $('#'+formname).show(); } 

我希望它能帮助你实现目标!