0

我正在尝试使用链接将 wordpress 页面中的内容加载到自定义模板上的 div 中。

我有一个隐藏的 div，当内容加载到其中时，应该用 slideDown 显示。

我有几个指向不同页面的链接，我想通过 onClick 或类似的东西将它们加载到这个 div 中。

示例：

假设我有以下链接：
- 链接 1（主页）
- 链接 2（关于）
- 链接 3（联系人）

如果访问者单击这些链接，应该会发生以下情况：

单击链接 2 --> 加载到 div --> div 以 slideDown 或类似的方式显示。

单击链接 3 --> 先前加载的内容淡出，链接 2 的内容淡入

单击链接 2（再次）-> 与单击链接 2 类似的操作...

单击链接 1 --> 清除 div 并通过 slideUp 或类似方法将其隐藏。

如果链接 2 或 3 处于活动状态，并且用户再次单击相同的链接 --> 与单击链接 1 类似的操作

我找到了一些代码来帮助我，但我还没有完全做到。
继承人我到目前为止：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
      $('#navigationMenu a').click(function() { // When a menu item is selected
            $('#maincontent').load($(this).attr('href')); // Load its linked page into the div
            return false; // And prevent it following the link
      });
});

function toggleSlider() {
    if ($("#maincontent").is(":visible")) {
        $("#sec-content").animate(
            {
                opacity: "0"
            },
            600,
            function(){
                $("#maincontent").slideUp();
            }
        );
    }
    else {
        $("#maincontent").slideDown(600, function(){
            $("#sec-content").animate(
                {
                    opacity: "1"
                },
                600
            );
        });
    }   
}

</script>

我在 SO 上的相关帖子中找到了此代码，这使我可以将内容加载到具有 slideUp/slide/down 功能的 div 中。
但是它通过单击链接 3（在示例中）关闭了 div，所以我必须再次单击链接才能再次加载它。
而主链接 Link 1 还没有达到我想要的效果。

希望对此有更多了解的人可以在这里帮助我。
有可能吗？

谢谢！

---- 编辑代码 02/08/13 ----

<script type="text/javascript">

$(function() {
      $('#navigationMenu a').click(function() { // When a menu item is selected
            $('#maincontent').load($(this).attr('href')); // Load its linked page into the div
            return false; // And prevent it following the link
      });
});

var lastData;
$(function () {
    $("a").click(function(event) {
        loadData($(this).attr("href"));
        event.preventDefault();
    });
});

function loadData(data) {
    if(lastData == data) {
        $("#maincontent").slideUp();
    } else {
        $("#maincontent").html(data);
        $("#maincontent").slideDown();
    }
    lastData = data;
}

</script>

结果可以在http://tobba.org/no看到

4

1 回答 1

1

您可以尝试使用以下功能：单击链接时，查看它是否是最后一次单击的链接。如果是这样，那么 slideUp()。如果没有，则将数据放入其中，然后一旦数据可用，填充框并向下滑动。

这个例子可能会让你半途而废，你仍然需要使用 $.get 或 $.load 来获取你想要的数据。注意：lastData 在函数范围之外声明，以便在函数结束时不会丢失其值：http: //jsfiddle.net/turiyag/9na6K/

function loadData(data) {
    if(lastData == data) {
        $("#dataview").slideUp();
    } else {
        $("#dataview").html(data);
        $("#dataview").slideDown();
    }
    lastData = data;
}
于 2013-02-06T14:21:06.447 回答