-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);
});
});
И вот в 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', поле1 будет скрыто, но box2 не будет отображаться.
В чем проблема? Пожалуйста, помогите мне .. Спасибо в Advance.
Выглядит хорошо для меня. Вы не включаете другие части своего источника? – Brian
Ваш HTML не вложен правильно, поэтому есть множество несоответствующих начальных и конечных тегов. В результате '.box2' находится внутри' .box1'. – Barmar
У вас есть куча веселых тегов, разбросанных по ... Duplicate '' tags. –