即使在刷新頁面後，如何在同一個選項卡上？

我自己成功創建了它....但問題是當我刷新頁面時，所有內容都會隱藏起來。我希望在第一次加載頁面時看到第一個內容......然後，如果用戶點擊第二個鏈接並刷新頁面，他應該在刷新之前看到他點擊鏈接的內容。我認爲使局部變量Global可以成爲答案...但我不知道如何製作它。即使在刷新頁面後，如何在同一個選項卡上？

<html> 
 
<head> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
$("#content").find("[id^='tab']").hide(); 
 
\t $("#tabs a").click(function(){ 
 
\t var dip=$(this).attr('name'); //to grasp the name attribute we used attr separately otherwise we could write $(this[name='']) 
 
\t window.dip=dip; 
 
\t $("#content").find("[id^='tab']").hide(); 
 
\t $("#content").find('#' + dip).fadeIn(); //if there are many similar elements in a parent element, find is used to search the required element with the help of its id. 
 
\t }); 
 
}); 
 
</script> 
 
</head> 
 

 
<body> 
 
<div id="uppertabs"> 
 
\t \t \t <ul id="tabs"> 
 
\t \t \t \t <li><a href="#" name="tab1">Profile</a></li> 
 
\t \t \t \t <li><a href="#" name="tab2">Health</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t 
 
\t \t \t <div id="content"> 
 
\t \t \t \t <div id="tab1">Your profile is good</div> 
 
\t \t \t \t <div id="tab2">Check your health.</div> 
 
\t \t \t </div> 
 
</div> \t \t \t 
 

 
</body> 
 
</html>

來源

2014-09-29 Prakash Patil

爲什麼刷新頁面？除非我誤解，否則你描述的問題是「預期的行爲」。每當頁面刷新時，它都會返回原始狀態。所以你的問題是：爲什麼刷新頁面？或許我們可以幫助解決*那個問題（我懷疑AJAX將會是你的救星......） – gibberish 2014-09-29 03:43:02

我在一個標籤下使用了一個聊天代碼...所以爲了得到這些消息，我需要刷新它。在一個標籤中，我使用了一個動態內容搜索按鈕，所以每當我點擊它時，都會返回到第一個標籤...我必須再次打開該標籤才能看到結果。有沒有解決辦法？ – 2014-09-29 03:56:21

您必須使用服務器端語言，如PHP，讓聊天消息。

祕訣就是在您的javascript中使用AJAX來動態更新內容。這樣，所有內容都保持原樣 - 用戶保持在同一標籤上，但數據已更新。

請不要被AJAX嚇倒 - 它比聽起來容易得多。你只需要看幾個很好的例子。

請看看這些簡單examples-- 並嘗試出來爲自己：

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

https://stackoverflow.com/questions/25945137/php-fetch-content-from-one-form-and-update-it-in-other-form/25954450#25954450

這裏有一些事情你應該知道的AJAX：

（1）有四種格式爲AJAX請求 - 全$.ajax()結構，以及三個快捷結構（$.post()，$.get()和$.load()）

直到你非常擅長AJAX，我建議使用格式正確的$.ajax()代碼塊，這是上面的例子演示。這樣的代碼塊看起來像這樣：

$('#updateTab').click(function(){ 
    var thisTab = $(this).parent().attr('id'); 
    $('#my_hidden_input_field').val(thisTab); //store ID of Tab we are on 
    $.ajax({ 
     type: 'post', 
     url: 'update_chats.php', //external PHP file that processes AJAX request 
    dataType: 'html', 
     data: 'email=' + form.email.value, 
    success: (function(recd_data) { 
      var tabID = $('#my_hidden_input_field').val(); 
      $('#tab-' +tabID).find('#chatDIV').html(recd_data); 
    }); 
});

（2）就行了指定的文件url:必須是一個單獨的文件。這可能聽起來很明顯，但很多人（包括我）已經嘗試過，因爲我們可以通過將它「發佈」到它所在的同一頁面來處理表單 - 但是這無法通過AJAX完成。如果你嘗試，你會收到整個頁面返回而不是 PHP頁面應該發送的響應。

（3）在$.ajax()代碼塊中，data:行指定了發送到PHP處理器文件的數據。

（4）dataType:行指定了ajax代碼塊預期從接收的PHP處理器文件的數據類型。除非另有說明，否則默認的數據類型是html。

（5）在PHP處理器文件中，通過echo命令將數據返回給AJAX代碼塊。無論數據是被返回的HTML，文本或JSON，它是echo版回AJAX程序，就像這樣：

<?php 

//perform MySQL search here. You will get chat data; I will just get first/last names 
//For eg, MySQL returns array `$result` with: $result['firstname'] and $result['lastname'] 

$out = '<div id="myresponse">'; 
$out .= 'First Name: <input type="text" value="' .$result['firstname']. '" />'; 
$out .= 'Last Name: <input type="text" value="' .$result['lastname']. '" />'; 
$out .= '</div>'; 

echo $out; //this line sends the data back to the AJAX code block in javascript

請嘗試一些自己上面的例子中，你會看到它是如何工作。

沒有必要使用json發送/返回數據。但是，json是一種有用的格式發送數組數據 - 但正如你所看到的，你可以在PHP端構建一個完整的html響應和echo返回成品標記，所以通常不需要發送陣列數據本身。

最後，請不要隨時更改ID名稱。頁面呈現完成後，請單獨保留ID名稱。相反，添加/刪除類並使用類名通過jQuery和CSS引用元素。

來源

2014-09-29 15:28:16 gibberish

即使在刷新頁面後，如何在同一個選項卡上？

回答

相關問題