-1
我有2個div，默認情況下應該顯示1。然後我使用按鈕來顯示/隱藏每個div。切換div bug
這裏是我的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不會顯示。
會是什麼問題？請幫助我..在此先感謝。
我看不錯。你不包括你的源的其他部分？ – Brian
您的HTML嵌套不正確，所以有很多不匹配的開始和結束標記。因此，'.box2'位於'.box1'內。 – Barmar
你有一堆時髦的關閉標籤分散在...重複''標籤。 –