Question

与StackOverflow上的其他一些帖子一样，我希望将一系列隐藏的div中的内容加载到主内容div中。但是，我希望扩展此功能并执行我在其他任何帖子中找不到的内容。

我确实找到了Shyju提供的这个问题here的基础答案。

虽然解决方案非常有效，但我想扩展它并能够链接到活动div内的隐藏div（或链接解决方案中列出的#ajax）。

理想情况下，我希望有一个导航部分，其中包含所有来自隐藏div的home，previous和next链接，以替换#activeContent div的内容。 #activeContent（Home）的初始内容将是一个目录，允许您按下列表项直接跳转到关联的隐藏div，替换目录。

我过去曾使用过修改后的画廊滑块来适应这种情况，但我不想在前往B点的路上滚过A点和B点之间的所有div。我找到了ajax方法在这种情况下，简单地将内容替换为更优雅。

希望我的帮助请求是有道理的。任何帮助将不胜感激！

我目前的代码如下所示 -

$(".itemLink").click(function () {

    var id = $(this).attr("id").replace(/^.(\s+)?/, "");
    var contentTobeLoaded = $("#item_" + id).html();

    $('#activeContent').fadeOut(600,function(){
        $('#activeContent').html(contentTobeLoaded).fadeIn(500, function () {
        //do whatever you want after fadeIn
        });
    });

});

<body>

<section id="navigation">
    <a href="#" class="itemLink" id="a1">Item 1</a>
    <a href="#" class="itemLink" id="a2">Item 2</a>
    <a href="#" class="itemLink" id="a3">Item 3</a>
</section>

<section id="content">
    <h3>Content will be displayed below</h3>

    <div id="activeContent"></div>
</section>

<section id="hiddenContainer" style="display:none;">
    <div id="item_1">
        Item 1 content<br><br>
        <a href="#" class="itemLink" id="a4">Item 4</a>
    </div>

    <div id="item_2">
        Item 2 content
    </div>

    <div id="item_3">
        Item 3 content
    </div>

    <div id="item_4">
        Item 4 content
    </div>
</section>

Answer 1

您需要更改click方法才能使用live方法。当您将内容从隐藏div移动到活动状态时，它会删除与a元素绑定的事件。 live维护当前和未来元素的所有事件。

$(".itemLink").live('click', function () {

小提琴演示：http://jsfiddle.net/hSyYE/

注意

如果你使用jQuery 1.7+，那么正确的方法就是

$('body').on('click', 'a.itemLink', function () {

从隐藏的Div加载内容（扩展功能）

1 个答案: