- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试创建一个网页,在单击导航链接时替换主 div 的内容。我已经能够实现 Pushstate 函数来替换 div 内容并非常轻松地更改 url 地址。当使用 popstate 函数单击后退/前进按钮时,我还可以刷新内容。但是,现在我单击第一个链接,它工作正常,我单击下一个链接,它似乎应用了 2 个推送状态,第三次单击,应用了 3 个推送状态,等等。似乎某处发生了推送循环,但不确定它在哪里是。我正在寻找一些关于如何消除多个推送状态发生的建议,以便它们不会在我的历史记录中重复。
HTML 代码:
<nav id="headerNav">
<ul>
<li><button class="navButton" id="signIn" href="./content/signIn.php" name="reply" title="SignIn">Sign In</button></li>
<li><button class="navButton" id="signUp" href="./content/registration.php" name="registration" title="Registration">Sign Up</button></li>
<li><button class="navButton" id="about" href="./content/about.php" name="settings" title="About">About</button></li>
</ul>
</nav>
<section id="mainContent">
<!-- CONTENT PAGES REPLACE HERE -->
<?php
include ('./content/start.php');
?>
</section>
Javascript
$(document).ready(function() {
if (window.history && history.pushState) {
$(".navButton").click(function(e) {
e.preventDefault();
$("#mainContent").fadeOut().load($(this).attr("href")).fadeIn();
history.pushState(null, $(this).attr("title"), $(this).attr("name"));
});
}
});
window.addEventListener('popstate', function() {
//WHEN BACK/FORWARD CLICKED CHECKS URL PATHNAME TO DETERMINE WHICH CONTENT TO PLACE IN DIV
if (location.pathname == "/index.php") {
$("#mainContent").load("./content/start.php");
} else {
$("#mainContent").load("./content" + location.pathname + ".php");
}
});
最佳答案
解决了!这是我测试历史 API 的“if”条件。当我删除它时,它消除了重复的历史推送。我还让 htaccess 文件将所有输入的 url 重定向到索引页面,从而允许针对内容触发路径名比较。效果很好,但我知道随着网站的发展,我将不得不解决书签问题。目前,它按照我需要的方式运行,以便我可以继续前进!
window.onload = function() {
// PUSHES CORRECT CONTENT DEPENDING ON URL PATH - ENSURES BACK/FORWARD AND BOOKMARKS WORK
if (location.pathname == "/index2.php") {
$("#mainContent").load("./content/start.php");
} else {
$("#mainContent").load("./content" + location.pathname + ".php");
}
// EVEN HANDLER TO DETECT CLICK OF NAVBUTTON CLASS
$(".navButton").click(function(e) {
$(this).addClass("active");
$(".navButton").not(this).removeClass("active");
var $mainContent = $("#mainContent");
var $href = $(this).attr("href");
var $title = $(this).attr("title");
var $name = $(this).attr("name");
// REPLACES CONTENT WITH DYNAMIC TRANSITION
$mainContent.fadeOut(100, function() {
$mainContent.load($href, function() {
$mainContent.fadeIn(100);
});
});
//CHANGES DOCUMENT TITLE SINCE PUSHSTATE CAN'T DO THIS YET
document.title = $title;
// PUSHES URL CHANGE AND HISTORY STATE TO BROWSER
history.pushState('', $title, $name);
//PREVENTS DEFAULT ACTION OF NAVBUTTON
e.preventDefault();
});
// THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
window.onpopstate = function(event) {
if (location.pathname == "/index2.php") {
$("#mainContent").load("./content/start.php");
} else {
$("#mainContent").load("./content" + location.pathname + ".php");
}
};
};
关于javascript - 找不到创建多个历史条目的 popstate 循环的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22306364/
情况:我想从数据条目列表导航回我的 PageViewController。 before 和 previous 函数起作用 func pageViewController(pageViewContro
尊敬的 StackOverflow 用户 我有一个 gradle 项目,我想将其工件转换为 osgi 包。在这个包中,我有: 我不想导出的包(可能不会出现在 list 的 Export-Package
我为我的 PendingIntent 设置了一个警报。现在我想在我的 Activity 中显示是否设置了此警报。 Intent service = new Intent(context, MyServ
我有 2 个表、作者和书籍 authors 包含唯一的 IDauthorId 书籍也包含此作为外键 我需要知道书籍数量最多的作者。如果 2 个或更多作者并列最多书籍,我需要显示这两位作者 我已经能够通
我有一个名为 prospective_shop 的表,其中一个列名称是“用户名”。用户名未设置为主键,但我想删除所有具有重复用户名的行。我怎样才能以最快的方式做到这一点? 我尝试执行以下操作: ALT
我现在可以添加条目了。在我的应用程序中,用户可以在他的日历上输入约会/事件。但在他这样做之前,它应该向他显示他已经添加的事件。它应该从日历中获取事件并将其显示给他。这该怎么做?我被困在这部分。提前致谢
#include #include #include #include #include #include char *msg; ssize_t write_proc(struct file
我想将大于 1024 个字符的字符串传递到我的模块(文件系统)。由于内核参数限制为 1024 个字符,someone recommended改为使用 sysfs。 我试图包括 this example
我正在尝试使用 SQLAlchemy 构建以下查询(用作包含查询的子查询,该查询定义名为 tbl_outer 的别名): SELECT max(tbl.ts) AS max_1 FROM tbl WH
假设我有两张 map : Map map1 = Map.of( "a", "1", "b", "2", "c", "3", "x
通过简化示例,假设您有以下数据集: A B C Name Group Amount Dave A 2 Mike B 3 Adam C 4
我正在尝试在我的服务器上创建一个三级域虚拟主机。我希望配置设置正确,但我得到一个 ERR_NAME_NOT_RESOLVED错误。 我已经读到我必须在某处“添加 DNS 条目”以便解析名称,但我该怎么
我需要一个可用于在逗号分隔列表中查找第 N 个条目的正则表达式。 例如,假设此列表如下所示: abc,def,4322,mail@mailinator.com,3321,alpha-beta,43 .
GWT 应用程序(在 Eclipse 中开发)的源代码管理忽略文件中的典型条目是什么? 最佳答案 我会推荐: 你leave the eclipse files (.project, .classpat
我必须创建显示表 (Tbl) 中所有字段的输出,并创建一个额外的列来按月计算每个客户的累计总和(例如,如果客户在 4 月份有两次销售,新列将具有这些销售额和两行中任何先前销售额的总和)。我能做的就这么
文档 ( http://kubernetes.io/docs/user-guide/configmap/ ) 上用于使用值的示例基于 ConfigMap,其中每个数据条目都是一对/值。例子: apiV
我有一个奇怪的错字,我一遍又一遍地犯,而不是实际工作我的打字技巧,我想编辑我的 AutoHotkey 脚本来弥补这一点。 有时,当我输入大写字母时,我会点击:按钮并输入“I:”,我希望 AHK 仅用字
使用 lgdt 初始化 GDT 并将其加载到 GDTR 后,稍后如何更新 GDT? 如果我使用 sgdt 命令获取基地址,然后更新或添加条目,然后使用 lgdt 再次重新加载,我是否正确?还有其他方法
我有两个应用程序共享同一个数据库,即 API 和 MVC5 应用程序。两者都在本地主机上运行良好,但在部署到我的 Azure 帐户时出现此错误 Configuration Error Descrip
我正在尝试修剪我拥有的一些文件。我将为您保存到目前为止我编写的野兽,并通过提供虚构代码使其保持简单。 让我们来看看这个数组: [System.String[]]$Collection = 'Invit
我是一名优秀的程序员,十分优秀!