Question

我正在尝试创建此框，当您单击它时，将加载新文本。 html代码如下：

<div class="hPage"><a name="Project">PROJECT</a>
    <div class="boxP" style="width:960px;height:840px;border:1px solid black;">
        <div class="gallery"> 
            <div id="div1">
                First story to be read              
            </div>
            <div id="div2">
                Second story to be read
            </div>
            <div id="div3">
                Third story to be read
            </div>
        </div>
    </div>
</div>

我曾尝试使用jQuery的click功能，但我经常无法正常工作。有谁知道如何完成它？

Answer 1

您的点击功能在哪里？无论如何，该函数应如下所示：

$(document).ready(function () {
  $(".boxP").click(function () {
    $(this).html("Loading new content...").load("URL");
  });
});

每次单击<div>时，都会触发AJAX调用。点击后立即显示消息"Loading new content..."。从URL中提取内容后，它会加载到<div>。

Answer 2

试试这个......

(function()
{   
    var divName, divNumber;
    $('.hPage > .boxP > .gallery > div').hide();
    $('.hPage > .boxP > .gallery > div#div1').show()
    $('.hPage > .boxP > .gallery > div').on('click', function()
    {
        divName = $(this).attr('id');
        divNumber = parseInt(divName.substring(3, 4));
        divNumber++;
        $(this).hide();
        $('.hPage > .boxP > .gallery > div#div'+divNumber).show();
    });     
})();

单击时在框中加载新内容

2 个答案: