0

在此页面中，我完成了表格列表，每个 tr 有两个链接是：- 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

添加/包含jquery-1.9.0.min.js文件。

创建一个div以显示：

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

创建另一个 div 来隐藏：

<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>

使用不同浏览器时避免错误的一些提示：

  • 不要在href属性中编写 Javascript 代码，始终将其放在onclick.

  • 要隐藏div，请按其样式display:none或block.

  • 不要使用visibility=hidden.

于 2013-06-14T07:55:49.257 回答