anchor 相关问题

锚点(<a> ... </a>)是一个HTML元素,用于定义当前元素(锚点)和目标(URI)之间的链接。

使用 jQuery 获取锚元素的绝对 URL

给定一个锚元素(类似于 $("a:first")),如何获得锚点指向的绝对 URL?

回答 4 投票 0

使用javascript实现锚点跳跃

我有一个经常会被发现的问题。问题是找不到明确的解决方案。 我有两个关于锚点的问题。 主要目标应该是获得良好的清洁......

回答 7 投票 0

滚动到 Iframe 内网页的锚点时标题消失

我有一个带有标题和 iframe(外部)的网页,用于加载不同的网页作为内容。其中一个网页还有一个 iframe(内部)和侧边栏。将网页加载到内部 iframe 时

回答 1 投票 0

(HTML框架标签)点击后目标框架将不再工作

我们的任务是创建一个网络程序作为测验,它将使用框架集和框架标签作为pdf页面导航器执行,我的问题是,在我单击锚点标签后,如果我单击锚点标签

回答 1 投票 0

a:链接和a:访问不起作用...?

CSS 中的 a:link 和 a:visited 代码不起作用。我不知道为什么,这有点奇怪 而且,它实际上做了与我想要的相反的事情。访问之前,链接是紫色的,访问之后是

回答 2 投票 0

如何仅在页面完全加载后才移动到页面锚点?

我尝试在我的网站上使用页面锚点,但遇到问题,因为内容是从 JSON 动态加载的,因此页面锚点在内容绘制和完全加载之前触发。

回答 1 投票 0

装载后前往锚点

想法 我有一个用户手册页面,它有点大,每个主题都有一个链接到它的锚点。 在我的产品页面中,我可以使用锚点将客户直接链接到手册中的该主题,例如: 妈...

回答 4 投票 0

滚动到带有固定标题的锚点,内容隐藏在标题后面,边距和顶部填充不起作用

我正在使用 smoothscroll.js 来导航我的网站。它在 Firefox 中停在正确的锚点上,但是在 Chrome 中,它会在第一次单击链接时传递该点,并将内容推送到顶部,嗨...

回答 3 投票 0

导航到另一个页面上的锚点

我只想从一个页面导航到另一页面上的特定点。 我的主页有四个部分: <

回答 5 投票 0

指向另一页面上的锚标记的锚链接不起作用

信息: 自托管 WordPress 网站 使用 Uniserver 在本地主机上进行测试,并且测试站点和预生产站点托管在公司的本地服务器而不是 FTP 上。 问题 创建了

回答 2 投票 0

anchor-spl 和anchor-lang 的锚构建错误版本

我正在使用以下 Rust 存储库: https://github.com/SmartCodeBlockchainDev/Nelson-NFT-stacking 当我尝试进行锚点构建时,出现以下错误: 获取包元数据失败...

回答 6 投票 0

错误cargo build sbf无法获取包元数据:“cargometadata”退出并出现错误:错误:无法加载工作区成员的清单

我尝试建立一个锚定项目 锚初始化 AnchorProject cd 锚定项目 锚定构建 然后就出现这个错误! admin@Desktop MINGW64 /d/folder_1/MY_Project/AnchorProject(主) $ 锚构建

回答 2 投票 0

如何解决Divi(WordPress)锚链接问题

我已在页面上设置 Divi 锚链接,但这些链接未按预期工作。锚链接仅将页面移动到顶部,但不会移动到特定部分。自己看:http://ryanr179.sg-host...

回答 1 投票 0

端线锚点,$,行为不符合预期

我有这个代码来处理 Windows 中的配置文件: 我有这个代码来处理 Windows 中的配置文件: <?php $config = '[log] log_writers[] = "file" log_writers[] = "screen" [General] maintenance_mode = 0 enable_browser_archiving_triggering = 0 enable_sql_optimize_queries = 0 force_ssl = 1'; echo preg_match_all( '/^maintenance_mode[ \t]*=[ \t]*\d$/m', $config ); 回波显示 0 https://onlinephp.io/c/51407 将正则表达式更新为: echo preg_match_all( '/^maintenance_mode[ \t]*=[ \t]*\d\s$/m', $config ); 达到预期效果1 为什么?? 我什至在 regex101 中验证了我的理智 https://regex101.com/r/CIxCkN/1 本地测试环境: RHEL 7 PHP 5.6.25 PCRE v8.32 2012-11-30 和 Windows Server 2022 PHP 8.2.7 PCRE v10.40 2022-04-14 每个评论请求: var_dump(base64_encode($config)); 字符串(240)“W2xvZ10NCmxvZ193cml0ZXJzW10gPSAiZmlsZSINCmxvZ193cml0ZXJzW10gPSAic2NyZWVuIg0KDQpbR2VuZXJhbF0NCm1haW50ZW5hbmNlX21vZGUgPSAwDQplbmFib GVfYnJvd3Nlcl9hcmNoaXZpbmdfdHJpZ2dlcmluZyA9IDANCmVuYWJsZV9zcWxfb3B0aW1pemVfcXVlcmllcyA9IDANCmZvcmNlX3NzbCA9IDE=" var_dump(bin2hex($config)); 字符串(358)“5b6c6f675d0d0a6c6f675f777269746572735b5d203d202266696c65220d0a6c6f675f777269746572735b5d203d202273637265656e220 d0a0d0a5b47656e6572616c5d0d0a6d61696e74656e616e63655f6d6f6465203d20300d0a656e61626c655f62726f777365725f617263686976696e675f 74726967676572696e67203d20300d0a656e61626c655f73716c5f6f7074696d697a655f71756572696573203d20300d0a666f7263655f73736c203d203 1" 一个答案是您的字符串(或通常的脚本)具有 Windows 行结尾。 在多行模式下,\d$仅匹配数字后跟一个立即换行符(由PCRE的编译时设置确定),如果其中隐藏了\r,则可能无法工作。 在正则表达式末尾添加 \s 将匹配所有行结束字符,这解释了为什么这对受影响的测试环境有帮助。 对于修复(除了您已经找到的 \s 添加之外),PCRE 允许您使用字符串开头的修饰符来调整哪些字符匹配为换行符,例如(*ANYCRLF): // Force Windows line-ending <?php $test = "foo\r\nbar"; var_dump(preg_match_all('/^foo$/m', $test)); var_dump(preg_match_all('/(*ANYCRLF)^foo$/m', $test)); int(0) 整数(1) 请参阅 https://3v4l.org/vOUgM 进行演示,并参阅 PCRE 文档的 换行约定部分了解一些详细信息。 或者,只需在字符串中使用 PCRE 在本地期望的换行符。 更一般地说,如果您实际上正在尝试解析问题中的字符串/文件,那么 array_key_exists 和 parse_ini_string/parse_ini_file 的组合将使一切变得更加清晰。 你的配置文件确实有windows-newlines \r\n,你的bin2hex 5b6c6f675d0d0a的第一部分翻译成[log]\r\n,这意味着@iainn的预感是正确的:) 尽管如此,我还是会把正则表达式写成 '/^维护模式\s*=\s*(\d)\s*$/m' 这样会更健壮,所以写成这样也没关系 maintenance_mode=5 或 maintenance_mode =5 或 maintenance_mode= 5 或 maintenance_mode = 5 ,无论您使用空格还是制表符,也无论您的行结尾是什么。

回答 2 投票 0

Bootstrap 4 锚链接未指向目标

所以我有一个 bootstrap4 单页索引页面,带有一个导航栏,其中包含跳转到页面正确部分的超链接。 示例:此导航链接转到 id="events: 的部分: 所以我有一个 bootstrap4 单页索引页面,带有一个导航栏,其中包含跳转到页面正确部分的超链接。 示例:此导航链接 转到 id="events: 的部分 <li class="nav-item"><a class="nav-link" href="#events">Events</a></li> <div id="events" class="events-container section-container text-left vents px-md-5"> 我创建了一个具有相同导航栏和链接的单独 contact.php 页面,并使用以下代码从该 contact.php 页面链接到索引页面上的部分: <li class="nav-item"><a class="nav-link" href="index.php#events">Events</a></li> 但是,这不起作用。单击该链接不会执行任何操作。所有列表链接都将链接到index.php 页面,但不会链接到该页面上的特定部分。任何帮助或建议将不胜感激。 花了几个小时修改CSS并删除和添加不同的代码元素之后——最终发现问题是同位素jquery代码——认为它以某种方式干扰了锚链接。我从 contact.php 页面中删除了 isotope.js 文件。我是 javascript 新手,没有意识到 jquery 如何影响其他元素。任何关于覆盖同位素对锚点影响的提示或建议都非常受欢迎:)

回答 1 投票 0

带有“锚点”的 URL“文本片段”

例如,从移动浏览器(Opera)浏览此页面,所有部分都是关闭的,因此您需要打开其锚点才能看到该段落。现在,如何突出显示标题,Dettagli molecular...

回答 1 投票 0

Nuxt 3 使用哈希链接平滑滚动

在我的Nuxt.js 3项目中,我想实现单页导航。我遵循了以下文章,但没有成功。有什么建议么? https://dev.to/dimer191996/nuxt-js-smooth-scrolling-with...

回答 5 投票 0

在 <option> 标签内使用 href 链接

我有以下 HTML 代码: 首页 联系方式 我有以下 HTML 代码: <select name="forma"> <option value="Home">Home</option> <option value="Contact">Contact</option> <option value="Sitemap">Sitemap</option> </select> 如何将 Home、Contact 和 Sitemap 值设为链接? 我使用了以下代码,正如我所料,它不起作用: <select name="forma"> <option value="Home"><a href="home.php">Home</a></option> <option value="Contact"><a href="contact.php">Contact</a></option> <option value="Sitemap"><a href="sitemap.php">Sitemap</a></option> </select> 2022 年更新:这个答案很好,但实际上在 2022 年我们不应该再这样做了! 更新(2020 年 5 月): 有人在评论中问我为什么不提倡这个解决方案。我想这是一个语义问题。我宁愿我的用户使用 <a> 进行导航,并保留 <select> 进行表单选择,因为 HTML 元素具有语义满足并且它们有目的,anchors 带您去往的地方,<select> 用于从列表中选择内容。 考虑一下,如果您正在使用非传统浏览器(非图形浏览器或屏幕阅读器或以编程方式访问页面,或禁用 JavaScript)查看页面,那么此内容的“含义”或“意图”是什么 <select> 你用过导航吗?它说“请选择一个页面名称”,没有太多其他内容,当然也没有关于导航的内容。对此的简单反应是well i know that my users will be using IE or whatever so shrug,但这有点忽略了语义的重要性。 虽然一个时髦的下拉 UI 元素由合适的布局元素(和一些 js)组成,包含一些常规锚点,但即使布局元素丢失,它仍然保留其意图,“这些是一堆链接,选择一个,我们将导航到那里”. 这是一篇关于误用和滥用<select>的文章。 原答案 <select name="forma" onchange="location = this.value;"> <option value="Home.php">Home</option> <option value="Contact.php">Contact</option> <option value="Sitemap.php">Sitemap</option> </select> 更新(2015 年 11 月): 在当今时代,如果您想要一个下拉菜单,有很多可以说是 更好的方法来实现。 这个答案是对直接问题的直接回答,但我不这样做不要在面向公众的网站上提倡这种方法。 您不能在选项标签内使用 href 标签。您将需要 JavaScript 来执行此操作。 <select name="formal" onchange="javascript:handleSelect(this)"> <option value="home">Home</option> <option value="contact">Contact</option> </select> <script type="text/javascript"> function handleSelect(elm) { window.location = elm.value+".php"; } </script> 使用真正的下拉菜单:列表(ul,li)和链接。切勿滥用表单元素作为链接。 使用屏幕阅读器的读者通常会浏览自动生成的链接列表 - 他们会错过这些重要信息。许多键盘导航系统(例如 JAWS、Opera)为链接和表单元素提供不同的键盘快捷键。 如果您仍然无法放弃 select 的想法,至少不要使用 onchange 处理程序。这对于键盘用户来说是一个真正的痛苦,它使您的第三个项目几乎无法访问。 接受的解决方案看起来不错,但有一种情况它无法处理: 重新选择同一个选项时,不会触发“onchange”事件。所以,我想出了以下改进: HTML <select id="sampleSelect" > <option value="Home.php">Home</option> <option value="Contact.php">Contact</option> <option value="Sitemap.php">Sitemap</option> </select> jQuery $("select").click(function() { var open = $(this).data("isopen"); if(open) { window.location.href = $(this).val() } //set isopen to opposite so next time when use clicked select box //it wont trigger this event $(this).data("isopen", !open); }); (我没有足够的声誉来评论toscho的答案。) 我没有使用屏幕阅读器的经验,我确信您的观点是正确的。 但是,就使用键盘操作选择而言,使用键盘选择任何选项都很简单: TAB 到控件 按空格键打开选择列表 向上或向下箭头滚动到所需的列表项 ENTER 选择所需项目 仅在按 ENTER 时,onchange 或 (JQuery .change()) 事件才会触发。 虽然我个人不会将表单控件用于简单的菜单,但有许多 Web 应用程序使用表单控件来更改页面的呈现方式(例如排序顺序)。这些可以通过 AJAX 来实现,以将新内容加载到页面,或者在旧的实现中,通过触发新页面加载,这本质上是页面链接。 恕我直言,这些是表单控件的有效用途。 <select> 标签创建一个下拉列表。您不能将 html 链接放入下拉列表中。 但是,有一些 JavaScript 库提供类似的功能。这是一个示例:http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm <select name="career" id="career" onchange="location = this.value;"> <option value="resume" selected> All Applications </option> <option value="resume&j=14">Seo Expert</option> <option value="resume&j=21">Project Manager</option> <option value="resume&j=33">Php Developer</option> </select> 我确信有人可以用 Jquery 做出比这更好的答案,其中下拉列表中的更改将导致一个新页面(有利于导航栏上的导航控制)。 <td><select name="forma" id='SelectOption'> <option value="Home"><a href="home.php">Home</a></option> <option value="Contact"><a href="contact.php">Contact</a></option> <option value="Sitemap"><a href="sitemap.php">Sitemap</a></option> </select></td><td> document.getElementById('SelectOption').addEventListener('change', function() { val = $( "#SelectOption" ).val(); console.log(val) if(val === 'Home') { window.open('home.php','_blank'); } if(val === 'Contact') { window.open('contact.php', '_blank'); } if (val === 'Sitemap') { window.open('sitemap.php', '_blank'); } });

回答 0 投票 0

target="_blank" 不适用于下载属性

我使用如下: 下载 而 pdfSrc 来自 API 响应,它是一个 minio 链接....

回答 3 投票 0

如何将 HTML 页面滚动到给定的锚点

我想让浏览器将页面滚动到给定的锚点,只需使用 JavaScript。 我在 HTML 代码中指定了 name 或 id 属性: .. 我想让浏览器将页面滚动到给定的锚点,只需使用 JavaScript。 我在 HTML 代码中指定了 name 或 id 属性: <a name="anchorName">..</a> 或 <h1 id="anchorName2">..</h1> 我希望获得与导航至 http://server.com/path#anchorName 相同的效果。应滚动页面,以便锚点位于页面可见部分的顶部附近。 function scrollTo(hash) { location.hash = "#" + hash; } 根本不需要 jQuery! 更简单: var element_to_scroll_to = document.getElementById('anchorName2'); // Or: var element_to_scroll_to = document.querySelectorAll('.my-element-class')[0]; // Or: var element_to_scroll_to = $('.my-element-class')[0]; // Basically `element_to_scroll_to` just have to be a reference // to any DOM element present on the page // Then: element_to_scroll_to.scrollIntoView(); 您可以使用 jQuery 的 .animate()、.offset() 和 scrollTop。喜欢 $(document.body).animate({ 'scrollTop': $('#anchorName2').offset().top }, 2000); 示例链接:http://jsbin.com/unasi3/edit 如果你不想动画,请使用 .scrollTop(),例如: $(document.body).scrollTop($('#anchorName2').offset().top); 或者 JavaScript 的原生 location.hash,例如: location.hash = '#' + anchorid; 2018 年至今纯 JavaScript: 有一个非常方便的方法来滚动到元素: el.scrollIntoView({ behavior: 'smooth', // smooth scroll block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area. }) 但据我了解,它没有像下面的选项那么好的支持。 了解更多方法。 如果需要元素位于顶部: const element = document.querySelector('#element') const topPos = element.getBoundingClientRect().top + window.pageYOffset window.scrollTo({ top: topPos, // scroll so that the element is at the top of the view behavior: 'smooth' // smooth scroll }) CodePen 上的演示示例 如果您希望元素位于中心: const element = document.querySelector('#element') const rect = element.getBoundingClientRect() // get rects(width, height, top, etc) const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); window.scroll({ top: rect.top + rect.height / 2 - viewHeight / 2, behavior: 'smooth' // smooth scroll }); CodePen 上的演示示例 支持: 他们写道,scroll与scrollTo的方法相同,但scrollTo的支持效果更好。 详细了解方法。 jAndy 的解决方案很棒,但平滑滚动似乎在 Firefox 中出现问题。 这种方式在 Firefox 中也适用。 (function($) { $(document).ready(function() { $('html, body').animate({ 'scrollTop': $('#anchorName2').offset().top }, 2000); }); })(jQuery); 让浏览器将页面滚动到给定锚点的最简单方法是在 style.css 文件中添加 *{scroll-behavior: smooth;},并在 HTML 导航中使用 #NameOfTheSection。 *{scroll-behavior: smooth;} <a href="#scroll-to">Click to Scroll<a/> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <p>other sections</p> <section id="scroll-to"> <p>it will scroll down to this section</p> </section> 在 2018 年,你不需要 jQuery 来完成这样简单的事情。内置的 scrollIntoView() 方法支持“behavior”属性以平滑滚动到页面上的任何元素。您甚至可以使用哈希值更新浏览器 URL,使其可加入书签。 来自 滚动 HTML 书签的教程,这是一种自动为页面上的所有锚链接添加平滑滚动的本机方法: let anchorlinks = document.querySelectorAll('a[href^="#"]')   for (let item of anchorlinks) { // relitere     item.addEventListener('click', (e)=> {         let hashval = item.getAttribute('href')         let target = document.querySelector(hashval)         target.scrollIntoView({             behavior: 'smooth',             block: 'start'         })         history.pushState(null, null, hashval)         e.preventDefault()     }) } 这是一个没有 jQuery 的纯 JavaScript 解决方案。它已在 Chrome 和 Internet Explorer 上进行了测试,但未在 iOS 上进行了测试。 function ScrollTo(name) { ScrollToResolver(document.getElementById(name)); } function ScrollToResolver(elem) { var jump = parseInt(elem.getBoundingClientRect().top * .2); document.body.scrollTop += jump; document.documentElement.scrollTop += jump; if (!elem.lastjump || elem.lastjump > Math.abs(jump)) { elem.lastjump = Math.abs(jump); setTimeout(function() { ScrollToResolver(elem);}, "100"); } else { elem.lastjump = null; } } 演示:https://jsfiddle.net/jd7q25hg/12/ 平滑滚动到合适位置 获取正确y坐标并使用window.scrollTo({top: y, behavior: 'smooth'}) const id = 'anchorName2'; const yourElement = document.getElementById(id); const y = yourElement.getBoundingClientRect().top + window.pageYOffset; window.scrollTo({top: y, behavior: 'smooth'}); $(document).ready -> $("a[href^='#']").click -> $(document.body).animate scrollTop: $($(this).attr("href")).offset().top, 1000 CSS-Tricks 的解决方案在 jQuery 2.2.0 中不再有效。它会抛出选择器错误: JavaScript 运行时错误:语法错误,无法识别的表达式:a[href*=#]:not([href=#]) 我通过更改选择器修复了它。完整的片段是这样的: $(function() { $("a[href*='#']:not([href='#'])").click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); }); 大多数答案都不必要地复杂。 如果你只是想跳转到目标元素,则不需要JavaScript: # the link: <a href="#target">Click here to jump.</a> # target element: <div id="target">Any kind of element.</div> 如果你想动画滚动到目标,请参考5hahiL的回答。 这有效: $('.scroll').on("click", function(e) { e.preventDefault(); var dest = $(this).attr("href"); $("html, body").animate({ 'scrollTop': $(dest).offset().top }, 2000); }); https://jsfiddle.net/68pnkfgd/ 只需将“滚动”类添加到您想要设置动画的任何链接 jQuery("a[href^='#']").click(function(){ jQuery('html, body').animate({ scrollTop: jQuery( jQuery(this).attr('href') ).offset().top }, 1000); return false; }); 这是一个工作脚本,会将页面滚动到锚点。 要进行设置,只需为锚点链接提供一个与您要滚动到的锚点的名称属性相匹配的 id。 <script> jQuery(document).ready(function ($){ $('a').click(function (){ var id = $(this).attr('id'); console.log(id); if ( id == 'cet' || id == 'protein' ) { $('html, body').animate({ scrollTop: $('[name="' + id + '"]').offset().top}, 'slow'); } }); }); </script> 我在 CSS-Tricks 上找到了一个简单易用的 jQuery 解决方案。我现在用的就是这个。 $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); }); Vue.js 2 解决方案...添加一个简单的数据属性来简单地强制更新: const app = new Vue({ ... , updated: function() { this.$nextTick(function() { var uri = window.location.href var anchor = ( uri.indexOf('#') === -1 ) ? '' : uri.split('#')[1] if ( String(anchor).length > 0 && this.updater === 'page_load' ) { this.updater = "" // only on page-load ! location.href = "#"+String(anchor) } }) } }); app.updater = "page_load" /* Smooth scrolling in CSS - it works in HTML5 only */ html, body { scroll-behavior: smooth; }

回答 17 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.