个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我的 html 页面中有此代码:
<body>
<div align="center">
<a href="../index.html">
<img border="0" src="banner1.jpg" width="800" height="120" alt="Ecommerce Knowledge Base"> </a>
<div style="background-image:url(Heading%20Background.jpg); width:800px">
<a href="../index.html" style="position:relative; left:-130px">HOME</a>
<a href="" style="position:relative; left:-65px" id="planning">PLANNING</a>
</div>
...
...
...
</body>
超链接HOME链接到index.html页面，该页面位于包含此html页面的文件夹的根文件夹中。但点击这个超链接后什么也没有发生。即使链接到同一页面的横幅也不起作用。
奇怪的是，这两个超链接之前都工作正常，直到我在页面中做了一些“jquery”代码更改。但我不确定这一变化如何影响这一点。请帮忙。这些是代码更改:
<script>
$(document).ready(function(){
$("#planning").click(function(e){
$("#planning_panel").slideToggle("slow");
e.preventDefault()
});
});
</script>
至:
<script>
$(document).ready(function() {
$(document).on('click',function(e) {
e.preventDefault();
var $panel = $("#planning_panel");
if (e.target.id === 'planning') {
$panel.slideToggle('slow');
} else {
$panel.slideUp('slow');
}
});
});
</script>
两个脚本都工作正常，唯一的问题是一旦进行更改，超链接就停止工作。
最佳答案
这个新代码:
$(document).ready(function() {
$(document).on('click',function(e) {
e.preventDefault();
// ...
});
});
...告诉浏览器，当发生冒泡到文档的点击时(大多数点击最终都会这样做，除非您从更深处的处理程序中调用 stopPropagation)，浏览器应该 阻止默认操作。单击链接的默认操作是跟随该链接。
解决方案是仅在您想要阻止单击操作时调用 e.preventDefault();。以下是我可能会如何重新编写该代码:
$(document).ready(function() {
$(document).on('click',function(e) {
var $panel = $("#planning_panel");
if ($(e.target).closest("#planning")[0]) {
// Click is on the planning link, toggle the panel and prevent the default
$panel.slideToggle('slow');
e.preventDefault();
} else {
// Not on the planning link, slide the panel up
$panel.slideUp('slow');
}
});
});
Live Example | Source (我已将 HOME 链接上的 ../index.html 更改为 http://stackoverflow.com，但其他唯一的变化是代码)
我们仅阻止位于 #planning 链接上的默认点击操作。
旁注:我用过 closest而不是检查e.target.id，因为它更强大。对于您的标记来说，这并不是绝对必要的，但如果您稍微更改了标记(添加 span 或 em 或其他内容)，您就会需要它，所以它有利于鲁棒性。
关于javascript - 超链接标签 "<a>"在 html 页面中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14109730/
25
4
0
我使用下拉菜单提供一些不同的链接，但我希望这些链接在同一选项卡中打开，而不是在新选项卡中打开。这是我找到的代码，但我对 Javascript 非常缺乏知识 var urlmenu = docume
我对 javascript 不太了解。但我需要一个垂直菜单上的下拉菜单，它是纯 JavaScript，所以我从 W3 复制/粘贴脚本:https://www.w3schools.com/howto/t
我已经坐了 4 个小时，试图让我的导航显示下 zipper 接垂直，但它继续水平显示它们。我无法弄清楚为什么会发生这种情况或如何解决它。 如果有人能告诉我我做错了什么，我将不胜感激。我有一个潜移默化的
我正在尝试创建选项卡式 Accordion 样式下拉菜单。我使用 jQuery 有一段时间了，但无法使事件状态达到 100%。 我很确定这是我搞砸的 JS。 $('.service-button').
对于那些从未访问过 Dropbox 的人，这里是链接 https://www.dropbox.com/ 查看“登录”的下拉菜单链接。我如何创建这样的下 zipper 接？ 最佳答案 这是 fiddle
我正在制作一个 Liferay 主题，但我在尝试设计导航菜单的样式时遇到了很多麻烦。我已经为那些没有像这样下拉的人改变了导航链接上的经典主题悬停功能: .aui #navigation .nav li
如果您将鼠标悬停在 li 上，则会出现一个下拉菜单。如果您将指针向下移至悬停时出现的 ul，我希望链接仍然带有下划线，直到您将箭头从 ul 或链接移开。这样你就知道当菜单下拉时你悬停在哪个菜单上。 知
我有一个带有多个下拉菜单的导航栏。因此，当我单击第一个链接时，它会打开下拉菜单，但是当我单击第二个链接时，第一个下拉菜单不会关闭。 (所以如果用户点击第二个链接我想关闭下拉菜单) // main.js
我正在尝试制作一个导航下拉菜单(使用 Bootstrap 3)，其中链接文本在同一行上有多个不同的对齐方式。 在下面的代码中，下拉列表 A 中的链接在 HTML 中有空格字符来对齐它们，但是空白被忽略
我希望有人能帮我解决这个 Bootstrap 问题，因为我很困惑。 有人要求我在底部垂直对齐图像和其中包含图像的链接。 我面临的问题是他们还希望链接在链接/图像组合上具有 pull-right，这会杀
我正在构建一个 Rails 应用程序，并希望指向我的类的每个实例的“显示”页面的链接显示在“索引”页面的下拉列表中。我目前正在使用带有 options_from_collection_for_sele
我有以下 Bootstrap3 导航菜单 ( fiddle here )。我想设置“突出显示”项及其子链接与下拉列表 1 和 2 链接不同的链接文本(和悬停)的样式。我还希望能够以不同于 Highli
我对导航栏中的下拉菜单有疑问。对于普通的导航链接(无下拉菜单)，我将菜单文本放在 H3 中，但是当我尝试对下 zipper 接执行相同操作时，箭头不在标题旁边，而是在标题下方。我决定用 span 替换
我是一名优秀的程序员,十分优秀！