Question

这是 index.php 的代码，有3个div：

<body>
    <div class="div_header" id="div_header">
    </div>
    <div class="div_left" id="div_left">
        <ul>
          <li>Patienten
            <ul>
              <li><a href="#" id="patienten_anlegen">Patienten anlegen</a></li>
              <li><a href="#" id="patienten_bearbeiten">Patienten bearbeiten</a></li>
              <li><a href="#" id="patienten_loeschen">Patienten loeschen</a></li>
            </ul>
          </li>
          <li>Termine
            <ul>
              <li>Termine anlegen</li>
              <li>Termine bearbeiten</li>
              <li>Termine löschen</li>
            </ul>
        </ul>
    </div>
    <div class="div_main" id="div_main">
    </div>
    <div class="div_right" id="div_right">
    </div>
</body>

menue.js ：

$(document).ready(function(){
    $("#patienten_anlegen").click(function(){
        $("#div_main").load("templates/patienten/patienten_anlegen.php");
    });
    $("#patienten_bearbeiten").click(function(){
        $("#div_main").load("templates/patienten/patienten_bearbeiten.php");
    });
    $("#patienten_loeschen").click(function(){
        $("#div_main").load("templates/patienten/patienten_loeschen.php");
    });
});

如果我点击“Patienten anlegen”，我想更改“div_main”的内容。这有效，但我想，如果我按F5（重新加载）在同一个站点上，而不是在index.php，我不想在浏览器的地址栏中看到“＃”（如： 本地主机/ patientenverwaltung /＃）

对不起我的英语，我希望你明白我的意思;）

Answer 1

您可以使用散列导航和ajax，因此下次单击重新加载/返回/下一个按钮时，导航将按预期工作。您需要查找的属性是：location.hash

假设你改变了这样的html：

          <li><a href="#anlegen" id="patienten_anlegen">Patienten anlegen</a></li>
          <li><a href="#bearbeiten" id="patienten_bearbeiten">Patienten bearbeiten</a></li>
          <li><a href="#loeshen" id="patienten_loeschen">Patienten loeschen</a></li>

并在javascript中：

$(document).ready(function(){
    if(location.hash.substring(1))
    {
    var initialPageToLoad= "patienten_" + location.hash.substring(1);
    $("#div_main").load("templates/patienten/" + initialPageToLoad);
    }
});

这将确保在文档准备好后立即加载最后的内容。

Answer 2

我想你想保持你网站的状态。如果是这种情况，那么你可以使用cookies。

即。点击每个div更改cookie的值并在加载时检查它并触发相应div的点击。

Answer 3

点击f5将重新加载页面，您将重置在使用应用程序期间加载的任何页面数据。

网址中的哈希值是因为您有<a href="#"></a>

为了防止这种情况，请在点击处理程序中添加 -

$("#patienten_loeschen").click(function(e){
   e.preventDefault();
...

由于链接是javascript“链接” - 如果您担心可访问性和搜索索引抓取工具，请使用其他元素而不是锚标记

<div id="patienten_loeschen"> ...

并且使用css，您可以将此“感觉”变成链接。

#patienten_loeschen { cursor:pointer; text-decoration:underline; }

Answer 4

如果你只是想摆脱“＃”，你可以用HTML指定：

<li><a href="javascript:void(0);" id="patienten_anlegen">Patienten anlegen</a></li>

Answer 5

首先，关于网址中的＃：您必须从标记中删除href="#"。但是，当您将鼠标悬停在链接上时，这也将删除链接光标。要解决这个问题，请为每个元素添加一个类（例如“link”）并添加一些css来修复它。

<li><a class="link" id="patienten_anlegen">Patienten anlegen</a></li>
<li><a class="link" id="patienten_bearbeiten">Patienten bearbeiten</a></li>
<li><a class="link" id="patienten_loeschen">Patienten loeschen</a></li>

的CSS：

.link {
    cursor: pointer;
}

接下来，要保留原始状态，您有两种选择：将其存储在本地存储（仅限HTML5）中，或者在单击每个链接时添加查询字符串，以使您的URL具有“？previousview = anlegen”或类似内容。 p>

由于你想要删除url中的＃，我将使用本地存储方法。

$('.link').on('click', function (e) {
    sessionStorage.setItem("previousView", this.id);
});

然后重新加载视图

if (sessionStorage.getItem("previousView")) {
    $("div-main").load("templates/patienten/"+sessionStorage.getItem("previousView")+".php");
}

Answer 6

如果您要求在重新加载时保留数据。

如果您希望这样，您必须在加载页面时查询数据库中的数据。实施例

    <html>
    <body>
    <?php
you must query here, the data you want to display, 
if (no data yet) then
 do some codes here
else display the data
end if
?>

Then you can perform the ajax here.
    </body>
    </html>

Answer 7

你想在你的网站上进行ajax导航;

为此，您应该更改div的内容，然后更改您网站的部分网址。因为许多ajax导航方案是可用的，或者流行的是基于哈希的导航。看看，

<强>参考

如何使用AJAX更改DIV的内容

7 个答案: