我有2个Div，默认情况下应该显示1个。然后我用按钮显示/隐藏每个div。
这是我的jquery脚本：
$(document).ready(function(){
$(".box1").show(300);
$(".box2").hide();
$(".cost_summary").click(function(){
$(".box2").hide(300);
$(".box1").show(300);
});
$(".price_spec").click(function(){
$(".box1").hide(300);
$(".box2").show(300);
});
});
这是PHP检索的HTML脚本......
<button class="cost_summary">Project Cost Summary</button>
<button class="price_spec">Pricing & Specification</button>
<div class='box1'>
<h3 align='center'>Hi!!!Box1</h3>
<form action='' method='POST' name='sum_porj'>
<table align='center'>
<tr>
<td align='center'>
<input type='button' value='Close' class='button' onclick='javascript:window.close()'>
</td>
</tr>
<tr>
<td align='center'>
<table align='center' border='1'>
<thead style='background: -moz-linear-gradient(top, #FF0101, #630000); color:#FFF;'>
<th style='padding: 10px' width='20px'>Quote ID</th>
<th style='padding: 10px' width='35px'>Window</th>
<th style='padding: 10px'>Width</th>
<th style='padding: 10px'>Height</th>
<th style='padding: 10px' width='10px'>No. Sets</th>
<th style='padding: 10px' width='25px'>Hanwha Profiles</th>
<th style='padding: 10px' width='30px'>Metal Reinforcement</th>
<th style='padding: 10px'>Accessories</th>
<th style='padding: 10px'>Glass</th>
<th style='padding: 10px'>Screen</th>
<th style='padding: 10px'>Sealant</th>
<th style='padding: 10px'>Fabrication</th>
<th style='padding: 10px'>Installation</th>
<th style='padding: 10px'>Total</th>
</thead>
<tbody>
<tr bgcolor='#E3E4FA'> <td align='center'>80021</td> <td align='center'>BPJF-043 C</td>
<td align='center'>700</td>
<td align='center'>600</td>
<td align='center'>1</td> <td align='right'>631.0052</td> <td align='right'>541.1608</td> <td align='right'>749.2632</td> <td align='right'>249.67</td> <td align='right'>0</td> <td align='right'>44.94</td> <td align='right'>556.4</td> <td align='right'>598</td> <td align='right'>3370.4392</td></tr></tr><tr bgcolor='#FFF'> <td align='center'>80021</td> <td align='center'>BPJF-043 2C</td>
<td align='center'>1200</td>
<td align='center'>800</td>
<td align='center'>1</td> <td align='right'>1209.4269</td> <td align='right'>1005.3453</td> <td align='right'>2024.1722</td> <td align='right'>621.455</td> <td align='right'>0</td> <td align='right'>102.72</td> <td align='right'>856</td> <td align='right'>920</td> <td align='right'>6739.1194</td></tr></tr><tr bgcolor='#E3E4FA'> <td align='center'>91199</td> <td align='center'>BF-048 SS</td>
<td align='center'>360</td>
<td align='center'>420</td>
<td align='center'>2</td> <td align='right'>1611.3598</td> <td align='right'>629.283</td> <td align='right'>1055.7618</td> <td align='right'>195.755</td> <td align='right'>195.76</td> <td align='right'>214</td> <td align='right'>333.84</td> <td align='right'>358.8</td> <td align='right'>4594.5596</td></tr></tr><tr bgcolor='#FFF'> <td align='center'>91199</td> <td align='center'>BF-048 FSSF</td>
<td align='center'>3600</td>
<td align='center'>1200</td>
<td align='center'>2</td> <td align='right'>12323.7</td> <td align='right'>7803.2846</td> <td align='right'>2302.6972</td> <td align='right'>5593.105</td> <td align='right'>5593.1</td> <td align='right'>924.48</td> <td align='right'>2054.4</td> <td align='right'>2208</td> <td align='right'>38802.7668</td></tr></tr><tr> <td></td> <td></td> <td></td> <td colspan='2' align='center'>TOTAL AMOUNT</td> <td align='right'><b style='color:#900;'>15775.4919</b></td> <td align='right'><b style='color:#900;'>9979.0737</b></td> <td align='right'><b style='color:#900;'>6131.8944</b></td> <td align='right'><b style='color:#900;'>6659.985</b></td> <td align='right'><b style='color:#900;'>5788.86</b></td> <td align='right'><b style='color:#900;'>1286.14</b></td> <td align='right'><b style='color:#900;'>3800.64</b></td> <td align='right'><b style='color:#900;'>4084.8</b></td> <td align='right'><b style='color:#900;'>53506.885</b></td></tr> </tbody>
</td>
</tr>
</table>
</form>
</div>
<div class='box2'>
<center><h1>Hello.Box2</h1></center>
<form name='price_specific' action='' method='POST'>
</form>
</div>
页面加载时class="box1"应显示为默认值。然后，当我点击按钮class='price_spec'时，box1应该隐藏，并且应该显示box2。
我也在使用jquery v.1.9.1。
就我而言。当我点击按钮class='price_spec'时，box1将隐藏，但box2将不会显示。
这会是什么问题？请帮助我..提前致谢。
答案 0 :(得分：3)
您的表格的html代码错误，您错过了一些</tr>，并错误地添加了一些额外的</tr>。一些</table>缺失的地方。
<button class="cost_summary">Project Cost Summary</button>
<button class="price_spec">Pricing & Specification</button>
<div class='box1'>
<h3 align='center'>Hi!!!Box1</h3>
<form action='' method='POST' name='sum_porj'>
<table align='center'>
<tr>
<td align='center'>
<input type='button' value='Close' class='button' onclick='javascript:window.close()'>
</td>
</tr>
<tr>
<td align='center'>
<table align='center' border='1'>
<thead style='background: -moz-linear-gradient(top, #FF0101, #630000); color:#FFF;'>
<th style='padding: 10px' width='20px'>Quote ID</th>
<th style='padding: 10px' width='35px'>Window</th>
<th style='padding: 10px'>Width</th>
<th style='padding: 10px'>Height</th>
<th style='padding: 10px' width='10px'>No. Sets</th>
<th style='padding: 10px' width='25px'>Hanwha Profiles</th>
<th style='padding: 10px' width='30px'>Metal Reinforcement</th>
<th style='padding: 10px'>Accessories</th>
<th style='padding: 10px'>Glass</th>
<th style='padding: 10px'>Screen</th>
<th style='padding: 10px'>Sealant</th>
<th style='padding: 10px'>Fabrication</th>
<th style='padding: 10px'>Installation</th>
<th style='padding: 10px'>Total</th>
</thead>
<tbody>
<tr bgcolor='#E3E4FA'>
<td align='center'>80021</td>
<td align='center'>BPJF-043 C</td>
<td align='center'>700</td>
<td align='center'>600</td>
<td align='center'>1</td>
<td align='right'>631.0052</td>
<td align='right'>541.1608</td>
<td align='right'>749.2632</td> <td align='right'>249.67</td>
<td align='right'>0</td>
<td align='right'>44.94</td>
<td align='right'>556.4</td>
<td align='right'>598</td>
<td align='right'>3370.4392</td>
</tr>
<tr bgcolor='#FFF'> <td align='center'>80021</td> <td align='center'>BPJF-043 2C</td>
<td align='center'>1200</td>
<td align='center'>800</td>
<td align='center'>1</td> <td align='right'>1209.4269</td> <td align='right'>1005.3453</td> <td align='right'>2024.1722</td> <td align='right'>621.455</td> <td align='right'>0</td> <td align='right'>102.72</td> <td align='right'>856</td> <td align='right'>920</td> <td align='right'>6739.1194</td></tr><tr bgcolor='#E3E4FA'> <td align='center'>91199</td> <td align='center'>BF-048 SS</td>
<td align='center'>360</td>
<td align='center'>420</td>
<td align='center'>2</td> <td align='right'>1611.3598</td> <td align='right'>629.283</td> <td align='right'>1055.7618</td> <td align='right'>195.755</td> <td align='right'>195.76</td> <td align='right'>214</td> <td align='right'>333.84</td> <td align='right'>358.8</td> <td align='right'>4594.5596</td></tr><tr bgcolor='#FFF'> <td align='center'>91199</td> <td align='center'>BF-048 FSSF</td>
<td align='center'>3600</td>
<td align='center'>1200</td>
<td align='center'>2</td> <td align='right'>12323.7</td> <td align='right'>7803.2846</td> <td align='right'>2302.6972</td> <td align='right'>5593.105</td> <td align='right'>5593.1</td> <td align='right'>924.48</td> <td align='right'>2054.4</td> <td align='right'>2208</td> <td align='right'>38802.7668</td></tr><tr> <td></td> <td></td> <td></td> <td colspan='2' align='center'>TOTAL AMOUNT</td> <td align='right'><b style='color:#900;'>15775.4919</b></td> <td align='right'><b style='color:#900;'>9979.0737</b></td> <td align='right'><b style='color:#900;'>6131.8944</b></td> <td align='right'><b style='color:#900;'>6659.985</b></td> <td align='right'><b style='color:#900;'>5788.86</b></td> <td align='right'><b style='color:#900;'>1286.14</b></td> <td align='right'><b style='color:#900;'>3800.64</b></td> <td align='right'><b style='color:#900;'>4084.8</b></td> <td align='right'><b style='color:#900;'>53506.885</b></td></tr>
</tbody>
</table>
</td>
</tr>
</table>
</form>
</div>
<div class='box2'>
<center><h1>Hello.Box2</h1></center>
<form name='price_specific' action='' method='POST'>
</form>
</div>
选中此http://jsfiddle.net/CrCpt/1/
现在工作正常