Question

在这个页面我已经完成了表列表，每个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();
    });
});

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

当点击该位置的特定链接显示div时，在jquery中隐藏其他人

1 个答案: