-1

我有 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 不会显示。

这会是什么问题??请帮助我.. 提前致谢。

4

1 回答 1

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/

它现在工作正常

于 2013-09-27T01:46:25.543 回答