使用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(); });
小提琴