在ajax jquery中重新加载页面后单击链接显示隐藏的div答案

【问题标题】：Show a hidden div on click a link after page reload in ajax jquery在ajax jquery中重新加载页面后单击链接显示隐藏的div
【发布时间】：2015-09-18 07:43:44
【问题描述】：

在我的页面中，我有许多隐藏的 div。在页面加载时，div 被隐藏。单击链接时，将显示特定的 div。我需要它，因为页面重新加载后应该显示 div。

我的代码在这里：

<li><a class="add_new" href="javascript:void(0);" onClick="showdivs()">Add </a></li>
<li><a class="info" href="javascript:void(0);" onClick="showdivs()">info</a></li>

<div id="add_new">hai.....</div>
<div id="info">heloo..</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<script>
    $(window).load(function() {
        $("#info").hide();
        $("#add_new").hide();
    });

    function showdivs() {
        var divs = $("#info,#add_new");

        //Show chosen div, and hide all others
        $("li a").click(function() {

            $(divs).hide();
            $("#" + $(this).attr("class")).show();

        });
</script>

代码有效，但页面未刷新。我需要重新加载页面，然后显示隐藏的 div。

【问题讨论】：

所以你试图让点击链接时出现div，但是为什么要刷新页面呢？
不知道有没有看懂，你想痛一下可见div的状态？那么你必须使用cookies

标签： javascript php jquery html ajax

【解决方案1】：

显示 div 时，使用 document.cookie = "divToShow=" + idOfTheDivToShow; 将类存储在 cookie 中。

如果您想刷新页面，请在您的 javascript 中使用 Location.reload()。

然后，使用此函数获取您的divToShow cookie 并显示相关的 div：

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return ""; 
}

【讨论】：

【解决方案2】：

我不知道这是否是您要查找的内容，但我认为您想重新加载页面，因为 div 没有显示，问题在于，您添加 clickhandler 以显示 div “点击”：

function showdivs() { //this is called, when you click a link
        var divs = $("#info,#add_new");

        //Show chosen div, and hide all others
        $("li a").click(function() {// here the clickhandler is added, so the first time it won't work

            $(divs).hide();
            $("#" + $(this).attr("class")).show();

        });

所以你必须点击两次才能显示 div。所以这是我的方法：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
$(window).load(function () {
    $("#info").hide();
    $("#add_new").hide();
});

function showdivs( element ) {// element is this param
    $("#" + $( element ).attr("class")).show();
}

</script>
<!-- add parameter this-->
<li><a class="add_new" href="javascript:void(0);" onClick="showdivs(this)">Add </a></li>
<li><a class="info" href="javascript:void(0);" onClick="showdivs(this)">info</a></li>

<div id="add_new">hai.....</div>
<div id = "info">heloo..</div>

你也可以这样做：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
$(window).load(function () {
    $("#info").hide();
    $("#add_new").hide();

    $("li a").click( function () {
        $("#" + $( this ).attr("class")).show();
    });

});

</script>

<li><a class="add_new" href="javascript:void(0);">Add </a></li>
<li><a class="info" href="javascript:void(0);">info</a></li>

<div id="add_new">hai.....</div>
<div id = "info">heloo..</div>

【讨论】：

【解决方案3】：

试试这个代码

<body>
<li><a class="add_new" href="javascript:void(0);" onClick="showdivs()">Add </a></li>
<li><a class="info" href="javascript:void(0);" onClick="showdivs()">info</a></li>

<div id="add_new">hai.....</div>
<div id="info">heloo..</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>

<script>
    jQuery(window).load(function() {
        jQuery("#info").hide();
        jQuery("#add_new").hide();
    });

    function showdivs() {
        var divs = jQuery("#info,#add_new");

        //Show chosen div, and hide all others
        jQuery("li a").click(function() {

            jQuery(divs).hide();
            jQuery("#" + $(this).attr("class")).show();
        });
    }
</script>
</body>

【讨论】：