anchor 相关问题

这是代码冒险这是代码 <nav class="navbar"> <h1 class="logo">ADVENTURE</h1> <ul class="nav-links"> <li><a href="#">Home</a></li> <li><a href="#">Tour</a></li> <li><a href="#">Explore</a></li> <li><a href="#">About</a></li> <li class="ctn"><a href="#">Contact</a></li> </ul> </nav> 我尝试将导航栏的文本颜色设置为#fff（白色） h1 改变了，但 a 元素不受影响浏览器将自己的默认样式应用于链接（“a”元素）。这些默认值通常包括蓝色（表示未访问的链接）和紫色（表示已访问的链接）。要覆盖它，您需要一个明确针对“a”元素的规则。 .navbar a { /* Targets links within the navbar */ color: #fff; }

html css colors anchor parent

回答 1 投票 0

悬停：秤不适用于顺风轨？有什么建议吗？

这是我的代码，我想将 hide:Scale 实用程序从 tailwindCSS 应用到我的链接框，但它不起作用。知道我在这里制造了什么冲突吗？ <% content_for :javascript_includes...

ruby-on-rails hover tailwind-css anchor scale

回答 1 投票 0

如何删除 MudNavLink 中的下划线

我正在使用带有 fontawesome 的 MudNavLink 组件，它带有下划线，看起来有点乱，所以我想删除它。我试过这个我正在使用带有 fontawesome 的 MudNavLink 组件，它带有下划线，看起来有点乱，所以我想删除它。我试过这个 <MudNavLink Href="Account/Register" Style="text-decoration:none" Match="NavLinkMatch.Prefix" Icon="fa-solid fa-registered">Register</MudNavLink> <MudNavLink Href="Account/Login" Style="text-decoration:none" Match="NavLinkMatch.Prefix" Icon="fa-solid fa-right-to-bracket">Login</MudNavLink> 但这没有什么区别，有人知道如何做到这一点吗？哦！我正在查看 Microsoft FluentUi，并在我的 App.razor 文件中添加了这一行 <link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" /> 删除它解决了问题

css anchor mudblazor

回答 1 投票 0

如何使用react-testing-library测试锚点的href

我正在尝试测试我的锚标签。单击它后，我想查看 window.location.href 是否是我所期望的。我尝试渲染锚点，单击它，然后测试 window.location.href：测试（'

reactjs jestjs anchor href react-testing-library

回答 10 投票 0

缓慢滚动到 html 页面中的特定 div 或锚点

我有一个html页面，我想让它缓慢滚动到页面的特定点或整个页面。我尝试了以下代码但没有任何效果：我有一个 html 页面，我想让它缓慢滚动到页面的特定点或整个页面。我尝试了以下代码，但没有任何效果： <a href="#anchorName"></a> <script> function scrollTo(hash) { location.hash = "#anchorName"; } </script> 其次，我尝试滚动到 div，但在这种情况下我还必须使用 CSS 并设置高度。我正在努力避免这种情况。如 stackoverflow 过去的问题所示： <a href="#myDiv" id="button">button</a> <script> $("#button").click(function() { $('html, body').animate({ scrollTop: $("#myDiv").offset().top }, 2000); }); </script> 而且它根本不起作用。尝试这样： $(document).ready(function(){ $("#button").click(function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: $($.attr(this, 'href')).offset().top }, 2000); }); }); #myDiv { margin-top: 800px; height: 50px; width: 300px; background: red; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a href="#myDiv" id="button">button</a> <div id="myDiv"></div> 由于您将 #myDiv 设置为按钮的 href，因此您必须在触发动画之前 preventDefault()： $("#button").click(function(e){ e.preventDefault(); $('html, body').animate({ scrollTop: $("#myDiv").offset().top }, 2000); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="myDiv" id="button">button</a> <div style="height:400px;"></div> <div id="myDiv">Lorem Ipsum</div> 如果您使用的是 css 文件，可以插入以下规则缓慢滚动... html { scroll-behavior: smooth; } 您可以按照使用 jQuery 的示例代码平滑滚动到某个组件 id，例如： <a class="move_to_div" href="#anchorName"> move div </a> <div id="anchorName"> </div> <script> $(".move_to_div").click(function() { $('html, body').animate({ scrollTop: $("#anchorName").offset().top }, 1000); }); </script> 这只是示例，当单击“a href 链接”时，向下滚动将会平滑（要测试结果，请使用 css 在链接和 div 之间添加一些空格）我希望这对你有帮助。

javascript html scroll anchor autoscroll

回答 4 投票 0

使用特定的平滑滚动库将类添加到 Anchor

我最近安装了来自 cferdinandi 的平滑滚动库，平滑滚动功能就像一个魅力。使用 CMS 添加到我的文本中的锚点如下所示：我最近安装了 cferdinandi 的平滑滚动库，平滑滚动功能就像一个魅力。使用 CMS 添加到我的文本中的锚点如下所示： <span id="authentication" class="ancre"></span> 关于我在文本中谈论的内容，ID 每次都不同。而且效果很好。我的问题是，平滑滚动库似乎在运行时删除了该类，因此我的 class='ancre' 在调用锚点时不会显示。班级是： .ancre:target{ background-color: #131b24; color: white; } 所以我删除了类的“target”参数，并在 JS 文件中添加了一个函数，以便在平滑滚动运行后添加该类。看起来像这样： css/app.css 中的 CSS .ancre{ background-color: #131b24; color: white; } js/app.js 中的 JS after: function () { var className = 'ancre'; document.querySelector('.' + className).classList.remove(className); document.getElementById(anchor.id).classList.add(className); } 但是它不起作用，我就是不明白为什么。您可以通过按此页面上的“两步身份验证”和/或“移动”按钮来尝试。您可以使用scrollIntoView javascript 函数，无需库。 https://codepen.io/gezzasa/pen/gzXPbJ/ 首先我必须将容器设置为position: relative;，然后将锚点设置为position: absolute; top: 0;。将 JS 上的选项设置为 block : 'center' 现在，它只会滚动直到锚点位于屏幕中间。 var smoothScroll = function(e, me) 是我声明的函数，并在 a 标签的 onclick 上触发。有不同的方法来运行该函数，但这很简单。我在事件的 onclick 上传入了 event（单击时触发的事件）和 this 来告诉脚本我点击了什么。 e.preventDefault() 将阻止 a 标签触发其默认函数，该函数将使用提供的 href 重新加载页面。在这种情况下，它将附加一个没有该脚本的 ID。 document.querySelector(me.getAttribute('href')) 将获取需要滚动到的 ID，然后 scrollIntoView 函数将根据您提供的选项进行滚动。希望我解释得很好...我没有太多解释 JS 的经验。；

javascript html css anchor smooth-scrolling

回答 1 投票 0

点击链接时页面向下滚动

点击我的链接时页面向下滚动有问题。我很确定这是因为浏览器认为该链接应该是页面上某个区域的锚点。我正在使用...

javascript jquery html url anchor

回答 3 投票 0

Github Markdown 锚点仅链接到页面顶部

我不确定这个地方是否适合询问 Github wiki markdown 问题。如果是的话我会把它删除。所以，我正在为存储库编写一个 wiki 页面，并且我一直在尝试添加

github markdown anchor

回答 4 投票 0

在没有 href 属性的情况下使用 <a>（锚标记）是否有效？ [重复]

我一直在使用 Twitter Bootstrap 来构建一个网站，它的很多功能都依赖于将内容包装在中，即使它们只是要执行 Javascript。我遇到了问题

html anchor semantic-markup

回答 5 投票 0

同一页面上页面其他部分的 Angular 17 独立链接

这是我定义链接的地方这是我定义链接的地方 <div class="form-column"> <a href="#" (click)="scrollTo('form-container')" class="heading" >Book a Clarity Call</a > </div> 这是我定义id的地方 <div class="post-card-container" id="form-container"> 以下是我在组件内的函数 import { Cimport { Component, ElementRef } from '@angular/core'; import { CommonModule } from '@angular/common'; @Component({ selector: 'app-contact-us', standalone: true, imports: [CommonModule], templateUrl: './contact-us.component.html', styleUrl: './contact-us.component.scss', }) export class ContactUsComponent { constructor(private elementRef: ElementRef) {} scrollTo(elementId: string): void { const element = document.getElementById(elementId); if (element) { element.scrollIntoView({ behavior: 'smooth', block: 'start' }); } } } 我尝试将组件模板的一部分用作链接，单击该链接后，它必须将我带到模板中 id 所在的部分，但不起作用。你的scrollTo方法有很多代码只需将其更改为： scrollTo(elementId: string) { window.location.hash = elementId; }

html typescript href anchor angular17

回答 1 投票 0

阅读更多链接没有描述性文字

我有一个包含项目列表的页面。每个项目都包含一个指向不同页面的“阅读更多”链接。但是当我在该页面上运行灯塔工具时，它抱怨链接不...

html hyperlink seo anchor lighthouse

回答 3 投票 0

如何在此代码中定义锚点谷歌地图API的偏移量

我想将信息窗口移到标记之外。在此示例中，信息窗口在标记的同一点打开。 var 锚点 = new google.maps.MVCObject(); 锚点.set("po...

google-maps-api-3 anchor infowindow

回答 2 投票 0

如何通过CSS在html标题中插入锚点

我将一些 WordPress 博客文章收集到一个 html 文档中，通过 Prince 将其发布为 PDF。问题在于目录：它指向（通过到 o...