我有一个非常具体的问题.
我想使用fadeIn,fadeOut函数插入一个特定的代码,但是如果我在div标签中使用tr和td标签它就无法工作.
我有JS部分的代码：
var registrationPart = $('div.registration-part');
var loginPart = $('div.login-part');
$('span.logreg.log').click ( function () {
registrationPart.fadeOut("fast");
loginPart.fadeIn("slow");
}
这在html中：
<table class="table">
<div class="registration-part">
<tr>
<td>registration</td>
</tr>
</div>
<div class="login-part">
<tr>
<td>login</td>
</tr>
</div>
</table>
所以如果div中有tr,td标签,则fadeIn,fadeOut不起作用.如果我用div或span替换它们一切正常.
有没有办法如何离开tr,td,所以我不需要为div制作特定的样式表,所以它看起来像tr,td.
提前致谢.
解决方法
你所拥有的是无效的HTML,因此它不会呈现你的预期.你不能把< div>在< table>内它包含< tr>要素;你可以加一个< div>在< td>内元素,但这并没有真正帮助你.
如果要定义表的单独部分,请使用< tbody>标签：
HTML
<table class="table">
<tbody class="registration-part">
<tr>
<td>registration</td>
</tr>
</tbody>
<tbody class="login-part">
<tr>
<td>login</td>
</tr>
</tbody>
</table>
JavaScript的
var registrationPart = $('tbody.registration-part');
var loginPart = $('tbody.login-part');
$('span.logreg.log').click ( function () {
registrationPart.fadeOut("fast");
loginPart.fadeIn("slow");
}
如果您使用原始HTML查看this jsFiddle并使用Firebug检查表,您会注意到< div>元素在表之前并且为空,并且不包括您希望它们的行.
