时间戳

首页 > 解决方案 > 使用 jquery 的动态内容不起作用

jquery - 使用 jquery 的动态内容不起作用

问题描述

我一直在寻找很多小时试图制作加载内容的动态页面。我的代码正在加载 div，但是当我想将其还原为原始代码时，它根本不起作用。

这是html的代码：

<html>
<button id="btn_nav_register">
<button id="btn_nav_manage">
 <div id="content">
  <div id="manage">
       original content
  </div>
 </div>

<div id="register" style="display:none;">
     second content
</div>

</html>

这是我的jQuery

<script>

$('#btn_nav_register').click(function() {
        $("#manage").hide(400,function() {
            $("#content").html($("#register").html()).show(400);
        });

});

$('#btn_nav_manage').click(function() {

    $("#register").hide(400,function() {
        $("#content").html($("#manage").html()).show(400);
    });

});

</script>

注意：我想保持代码尽可能接近，因为我真的想保持加载内容的过渡。

标签： jqueryhtml

解决方案

您必须将“管理”移出“内容”:) 也关闭按钮标签..

    $('#btn_nav_register').click(function() {
            $("#manage").hide(400,function() {
                $("#content").html($("#register").html()).show(400);
            });

    });

    $('#btn_nav_manage').click(function() {

        $("#register").hide(400,function() {
            $("#content").html($("#manage").html()).show(400);
        });

    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<button type="button" id="btn_nav_register"> b1</button>
<button type="button" id="btn_nav_manage"> b2</button>
 <div id="content">

 </div>
<div id="manage" style="display:none;">
     original content
</div>
<div id="register" style="display:none;">
     second content
</div>

<script>
    $(document).ready(function(){
        $('#btn_nav_manage').trigger('click'); 
        // auto click button when page is ready for to show default content!
        // or also you can add a name for click function and call it in here
    });
</script>

</html>

推荐阅读