[英]Show a hidden div on click a link after page reload in ajax jquery
在我的頁面中，我有許多隱藏的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，並且存在問題，您添加了clickhandler以將div顯示為“ onClick” ：
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>
顯示div時，使用document.cookie = "divToShow=" + idOfTheDivToShow;將其存儲在cookie中document.cookie = "divToShow=" + idOfTheDivToShow; 。
如果要刷新頁面，請在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 "";
}
試試這個代碼
<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>
頁面重新加載jQuery后如何顯示div和當前鏈接處於活動狀態
[英]How to show a div and the current link active after page reload jquery
頁面重新加載后顯示隱藏的div（頁面重新加載后div變為可見）
[英]Show a hidden div after page reload ( div becomes visible after page reload )
jQuery Ajax-在單擊后但在內容加載之前顯示加載div？
[英]jquery ajax - show loading div after click but before content loads?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.