0

このページでは、テーブルのリストを作成し、各 tr には次の 2 つのリンクがあります。1) 大人と 2) 特定のリンク (大人または子供の場合) をクリックすると、その位置に div が表示され、他のすべての位置の div は非表示になります。次または他のリンクをクリックすると、前のリンク div が非表示になります。

特定のリンクをクリックしたときに、非表示の div (div で非表示のプロパティを指定したため) を表示したい ------------ HTMLは次のとおりです:: --------- ---

<td>
    <div class="tab-inner">
        <p><span><strong>Space : <?php echo $row->space; ?></strong></span>
        </p>
        <p><a href="javascript:;" name="allocation" id="Adult_Allocation_<?php echo $j;?>" rel="#apop1_1" rev="Adult Allocation">Adult $<?php echo $row->adultPrice; ?></a>

            <!-- <div id="SpanAdultAllot"></div>-->
        </p>
        <div style="display:none;" class="adult-wrapper">
            <div class="adult-box">
                <div class="adultborder">
                    <div id="adultallot" class="adult-msg">Adult Allocation</div> <span class="adult-select-no"></span>
                </div><span class="adultarrow"></span>

                <label id="adult" class="adultselect">Adult :</label>
                <select class="selectorbox" id="adultselect" name="adult">
                    <option value="">--</option>
                    <?php for($i=1; $i<=$row->space; $i++) { ?>
                    <option value="<?php if($i==$row->space) echo " selected='selected' "; ?>">
                        <?php echo $i;?>
                    </option>
                    <?php } ?>
                </select>   <strong></strong> 
            </div>
        </div>
        <?php if($row->childPrice
        <>'0'){ ?>
            <p><a href="javascript:;" name="allocation" id="Adult_Allocation_<?php echo $j;?>" rel="#cpop1_1" rev="Child Allocation">Child $<?php echo $row->childPrice; ?></a>
            </p>
            <!--<div id="SpanChildAllot"></div>-->
            <?php } ?>
    </div>
</td>

----------ここでJSコード::-----------

$('a[name="allocation"]').live("click", function () {
    $(this).parent().next('.adult-wrapper').show();
    $('.adult-select-no').live("click", function () {
        $(this).closest('.tab-inner').find('.adult-wrapper').hide();
    });
});
4

1 に答える 1

1

Add / include jquery-1.9.0.min.js file.

Create one div to show:

<div id="details_link" style="">
  <a href="javascript:void(0);" onclick="javascript:$('#details_div').show();  $('#details_link').hide();">Show Link </a>
</div>

Create another div to hide:

<div id="details_div" style="display:none;">Test show and hide div
  <a href="javascript:void(0);" onclick="javascript:$('#details_div').hide();  $('#details_link').show();">Hide Link </a>
</div>

Some tips for avoiding errors when using different browsers:

  • Don't write Javascript code in the href attribute, always put it in onclick.

  • To hide div, write in its style display:none or block.

  • Don't use visibility=hidden.

于 2013-06-14T07:55:49.257 に答える