anchor 相关问题

我面临的问题是，如果我在我的锚点所在的网站上，我的锚点似乎可以工作：我面临的问题是，如果我在我的锚点所在的网站上，我的锚点似乎可以工作： <li role="presentation"> <a aria-controls="k" data-toggle="tab" href="#k" role="tab">K</a> </li> 但是，如果我尝试通过 href 从另一个网站跳转到该网站上的特定部分，则不会。选项卡窗格是在 Bootstrap 中内置的。 domain.com/beamer-lexikon/#k 使超链接导航到该页面，但不导航到“k”部分。 “k”部分标有 id“k”： <div class="tab-pane fade" id="k" role="tabpanel"></div> 我是不是搞错了什么？您知道我可以从哪里开始寻找问题吗？ JavaScript、CSS？非常感谢和最诚挚的问候，删除 Beamer 词典后面的“/”，并确保目标 ID 在您要跳转到的部分中声明。除此之外，如果没有看到你的代码，就很难判断。 domain.com/beamer-lexikon#k 我发现Bootstrap框架不支持这种锚链接。解决方案是在文档就绪函数中锚点所在的页面上实现这段代码： if(window.location.hash != "") { $('a[href="' + window.location.hash + '"]').click(); } 最诚挚的问候，史蒂芬

html twitter-bootstrap anchor href

回答 2 投票 0

简单的内部链接不起作用

这应该非常简单，我正在尝试创建一个链接到长页面各个部分的“目录”...... 这是我尝试过的：这应该非常简单，我正在尝试创建一个“目录”，链接到长页面的各个部分...... 这是我尝试过的： <ul> <li><a href="#features">Features</a></li> </ul> 页面下方... <a name="features"></a> 我错过了什么吗？它根本不会链接，就好像锚点没有正确链接一样。我很感激这方面的任何建议。提前非常感谢！对于那些有类似问题的人，我找到了为什么它不起作用。我页面上的许多元素都是浮动元素。因此，如果锚点目标不在浮动元素内，则浏览器无法找到精确的链接点。换句话说，如果锚标记位于浮动元素之外，并且页面上有许多浮动元素，则内部链接可能无法正常工作。要解决此问题，请将锚定目标放置在浮动元素之一内。我也找到了这个信息这里很多时候，您会看到人们使用这些链接而不包围任何东西（例如<a name="1" id="1"></a>），但这并不像包围单词或图像时那样可靠。许多浏览器喜欢将一些元素放置在屏幕顶部，当您不包含任何内容时，您将面临浏览器感到困惑的风险。我遇到了和你一样的问题，这为我解决了： <a href="#ref" onclick="window.location.href = '#ref';">link content here</a> 似乎可以使用 <slot>s 没有 <slot>（不起作用） index.html <!DOCTYPE html> <html> <head>...</head> <body> <my-app></my-app> </body> </html> my-app.html <element id="ref"></element> 与 <slot>（有效） index.html <!DOCTYPE html> <html> <head>...</head> <body> <my-app> <element id="ref" slot="ref"></element> </my-app> </body> </html> my-app.html <slot name="ref"></slot> 这不是滚动到网页特定部分的方法。您需要一些 JavaScript 代码。 function scrollWindow() { window.scrollTo(x,y); // where // x = for horizontal co-ordinates, y = for vertical cordinates // e.g. x=100,y=600 -- try this } 单击链接时执行此功能 <ul> <li><a href="#features" onclick="scrollwindow();">Features</a></li> </ul> 此页面很好地解释了该属性：http://www.w3schools.com/jsref/met_win_scrollto.asp

html anchor internal-link

回答 5 投票 0

列表元素内的锚标记不起作用

我在无序列表元素中有几个锚标记，如下所示：我在无序列表元素中有几个锚标记，如下所示： <ul class="d-flex justify-content-center flex-row unordered"> <li class="li-0" id="li-0"><a href="/NavigationSection/features.html">Features</a></li> <li class="li-1" id="li-1"><a href="/NavigationSection/pricing.html">Pricing</a></li> <li class="li-2" id="li-2"><a href="/NavigationSection/help.html">Help</a></li> <li class="li-3" id="li-3"><a href="/NavigationSection/blog.html">Blog</a></li> <li class="li-4" id="li-4"><a href="/NavigationSection/about.html">About Us</a></li> </ul> 但是经过测试，锚标签似乎不起作用。我已经在谷歌上的开发工具中检查了控制台，锚标记也没有出现在源代码中的列表元素中。一些预先回答：是的，我有一个名为 NavigationSection 的文件夹，并且那些请求的 html 文件命名正确并且确实存在。我尝试过添加 z 索引，但这似乎不起作用。意外行为是由于 JavaScript 代码中的以下行造成的： $('.unordered').append($(`.li-${x}`)).text(listData[x]) .text()调用将<li>元素内的内容完全替换为文本。这还包括 <li> 元素中的任何 HTML，从而删除 <a> 元素。您可以考虑完全删除 .text() 调用： // Create hamburger menu when screen is less than 776px or else return to original values const listData = [] for (var i=0; i<=4; i++){ listData.push($(`.li-${i}`).text()) } if ($(window).width() < 776){ $('.unordered').html('<i class="fa-solid fa-bars mt-2 dropdown"></i>').css("paddingLeft", "0px") } else { for (var x=0; x<=4; x++){ $('.unordered').append($(`.li-${x}`)) } } @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap"); * { margin: 0px; padding: 0px; font-family: "Poppins", monospace, sans-serif; } @keyframes phone-load { 0% { transform: translateY(-100%); } 100% { transform: translateY(0%); } } @keyframes title-load { 0% { transform: translateY(100%); } 100% { transform: translateY(0%); } } @keyframes text-load { 0% { transform: translateX(-100%); } 100% { transform: translateX(0%); } } @keyframes bg-load { 0% { opacity: 0; } 100% { opacity: 100; } } body { height: 100svh; width: 100vw; background: url("./Secondary Files/bg-image.jpg"); background-repeat: no-repeat; background-size: cover; display: flex; justify-content: center; } @media (max-width: 915px) { body { height: 120svh; } } body main { background-color: rgb(14, 13, 13); width: 80%; margin: 75px 0px; border-radius: 25px; animation: 1s ease-in-out 0s 1 bg-load; } body main nav { margin-top: 25px; column-gap: 30px; animation: 1s ease-out 0s 1 text-load; } @media (max-width: 882px) { body main nav { column-gap: 10px; } } body main nav .sections-container { color: rgb(154, 189, 169); } body main nav .sections-container ul { list-style: none; margin: 0px; column-gap: 30px; } @media (max-width: 1030px) { body main nav .sections-container ul { column-gap: 10px; } } body main nav .sections-container ul li { float: left; font-weight: 300; cursor: pointer; } body main nav .account-buttons .login-btn, body main nav .account-buttons .sign-up-btn { background-color: rgb(29, 120, 139); font-weight: 700; color: black; } body main nav .account-buttons .login-btn:hover, body main nav .account-buttons .sign-up-btn:hover { color: black; } body main .info-display { flex-direction: row; transform: translateY(30%); } @media (max-width: 915px) { body main .info-display { flex-direction: column; row-gap: 50px; margin-top: 25px; transform: translateY(0%); } } @media (max-height: 960px) { body main .info-display { transform: translateY(15%); } } @media (max-height: 854px) { body main .info-display { transform: translateY(5%); } } body main .info-display .info .information-details { animation: 1s ease-out 0s 1 title-load; } body main .info-display .info .information-details h1, body main .info-display .info .information-details h6 { color: rgb(154, 189, 169); } body main .info-display .info .information-details h1 { max-width: 15ch; } body main .info-display .info .information-details .download-btn { background-color: rgb(29, 120, 139); font-weight: 700; } body main .info-display .phone-display { width: 332px; height: 545px; background-color: rgb(27, 27, 27); border-radius: 10px; animation: 1s ease-out 0s 1 phone-load; } @media (max-width: 1052px) { body main .info-display .phone-display { width: 332px; margin-bottom: 25px; } } @media (max-width: 433px) { body main .info-display .phone-display { width: 100%; } } body main .info-display .phone-display .phone-background { margin-top: 2%; width: 97%; height: 531px; background-color: rgb(1, 22, 26); border-radius: 10px; box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.158) inset; } body main .info-display .phone-display .phone-background .header-items { color: white; font-size: 15px; opacity: 0.65; } body main .info-display .phone-display .phone-background .card-container { background-image: url("./Secondary Files/card-bg.jpg"); background-repeat: no-repeat; background-size: cover; border-radius: 10px; } body main .info-display .phone-display .phone-background .card-container .card-info { font-size: 14px; color: rgb(154, 189, 169); } body main .info-display .phone-display .phone-background .card-container .card-info .cc-balance { font-weight: 700; } body main .info-display .phone-display .phone-background hr { width: 12%; border: dotted white 4px; border-bottom: none; } body main .info-display .phone-display .phone-background .spending-info .credit-limits, body main .info-display .phone-display .phone-background .spending-info .monthly-spend { background-color: rgb(29, 120, 139); border-radius: 10px; padding: 5px; width: 50%; } body main .info-display .phone-display .phone-background .spending-info .credit-limits p, body main .info-display .phone-display .phone-background .spending-info .monthly-spend p { font-size: 12px; margin-bottom: 5px; color: black; font-weight: 700; } body main .info-display .phone-display .phone-background .spending-info .credit-limits p span, body main .info-display .phone-display .phone-background .spending-info .monthly-spend p span { font-weight: 500; margin-right: 2px; } body main .info-display .phone-display .phone-background .spending-history { margin-top: 20px; width: 100%; color: rgb(154, 189, 169); } body main .info-display .phone-display .phone-background .spending-history h4 { margin: 20px 0px; font-size: 18px; } body main .info-display .phone-display .phone-background .spending-history .spends { width: 100%; } body main .info-display .phone-display .phone-background .spending-history .spends .location-time { font-size: 8px; } body main .info-display .phone-display .phone-background .spending-history .spends p { margin: 0px; } body main .info-display .phone-display .phone-background .spending-history .spends .spend-1, body main .info-display .phone-display .phone-background .spending-history .spends .spend-2, body main .info-display .phone-display .phone-background .spending-history .spends .spend-3 { font-size: 14px; width: 100%; row-gap: 24px; } body main .info-display .phone-display .phone-background .spending-history .spends .spend-1 .transaction-image, body main .info-display .phone-display .phone-background .spending-history .spends .spend-2 .transaction-image, body main .info-display .phone-display .phone-background .spending-history .spends .spend-3 .transaction-image { display: flex; flex-direction: row; background-color: rgb(29, 120, 139); padding: 2px 8px; height: 3svh; border-radius: 20px; text-align: center; justify-content: center; align-items: center; color: black; font-size: 16px; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styless.css"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> <title>Payment Landing Page</title> </head> <body> <main>  <nav class="container d-flex justify-content-between flex-row"> <div class="image-container"> <img src="./Secondary Files/monzo-logo.png" alt="Logo" class="img-fluid logo" width="60"> </div> <div class="sections-container"> <ul class="d-flex justify-content-center flex-row unordered"> <li class="li-0" id="li-0"><a href="/NavigationSection/features.html">Features</a></li> <li class="li-1" id="li-1"><a href="/NavigationSection/pricing.html">Pricing</a></li> <li class="li-2" id="li-2"><a href="/NavigationSection/help.html">Help</a></li> <li class="li-3" id="li-3"><a href="/NavigationSection/blog.html">Blog</a></li> <li class="li-4" id="li-4"><a href="/NavigationSection/about.html">About Us</a></li> </ul> </div> <div class="account-buttons d-flex flex-row column-gap-3"> <a href="/AccountSection/accounts.html"><button class="login-btn btn px-4"> Log In </button></a> <a href="/AccountSection/accounts.html"><button class="sign-up-btn btn px-4"> Sign Up </button></a> </div> </nav>  <section class="info-display d-flex justify-content-around align-items-center"> <section class="info"> <div class="information-details container d-flex align-items-left flex-column row-gap-4"> <h6>START SAVING MONEY</h6> <h1>Smart Credit Card For Your Daily Life.</h1> <button class="download-btn btn"> Download <i class="fa-regular fa-circle-down"></i> </button> </div> </section>  <section class="phone-display"> <div class="phone-holder px-0"> <div class="phone container-fluid px-0">  <div class="phone-background container-fluid"> <div class="header-items container px-0 d-flex justify-content-between flex-row py-3"> <i class="fa-solid fa-bars"></i> <p class="m-0">Welcome, Tom</p> <i class="fa-regular fa-bell"></i> </div> <div class="card-container container px-0"> <div class="card-info container px-0 d-flex flex-column ps-4 pt-2"> <p class="cc-title mb-2">Balance</p> <p class="cc-number mb-2">&bullet;&bullet;&bullet;&bullet; &bullet;&bullet;&bullet;&bullet; &bullet;&bullet;&bullet;&bullet; 9207</p> <p class="cc-balance mb-2">£56,231</p> <div class="brand-expiry d-flex flex-row justify-content-between"> <p class="cc-expiry mb-0-2">09/26</p> <i class="fa-brands fa-cc-visa me-5 fs-4"></i> </div> </div> </div> <hr class="mt-3 mx-auto"> <div class="spending-info container px-0 d-flex justify-content-center flex-row column-gap-3 "> <div class="credit-limits"> <p>Credit Limits</p> <p><span>£</span>5,000</p> </div> <div class="monthly-spend"> <p>Monthly Spend</p> <p><span>£</span>2,240</p> </div> </div> <div class="spending-history container d-flex flex-column align-items-left col-xxl-1"> <h4>History</h4> <div class="spends container-fluid d-flex align-items-start flex-row px-0"> <div class="spend-1 d-flex align-items-end flex-column me-4"> <div class="transaction-image mb-2"><i class="fa-solid fa-arrow-up"></i></div> <div class="transaction-image mb-2"><i class="fa-solid fa-arrow-up"></i></div> <div class="transaction-image"><i class="fa-solid fa-arrow-up"></i></div> </div> <div class="spend-2 d-flex align-items-left flex-column px-0"> <div class="location mb-1"> <p>Amazon</p> <p class="location-time">Today</p> </div> <div class="location mb-1"> <p>Halfords</p> <p class="location-time">Yesterday</p> </div> <div class="location mb-1"> <p>McDonald's</p> <p class="location-time">Yesterday</p> </div> </div> <div class="spend-3 d-flex align-items-left flex-column px-0"> <p class="mb-3 price">£46.99</p> <p class="mb-3 price">£25</p> <p class="price">£9.99</p> </div> </div> </div> </div> </div> </div> </section> </section> </main> </body> </html>

html sass anchor

回答 1 投票 0

我应该如何引用资产才能在 vue 3 组合 API 的生产构建中保持引用

如果我使用klasse A，它可以在开发中使用，但不能在生产中使用。我可以在中添加 import CHA from '/src/assets/uitslagen/CHA.pdf' 如果我使用 <a href="/src/assets/uitslagen/CHA.pdf">klasse A</a>，它在开发中有效，但在生产中无效。我可以在 import CHA from '/src/assets/uitslagen/CHA.pdf' 标签中添加 <script setup>，但我不知道如何编写锚链接。 <a :href="CHA">klasse A</a>不起作用。我应该如何在 Vue 3 组合 API 中执行此操作？使用URL导入： https://vitejs.dev/guide/assets#explicit-url-imports import CHA from '/src/assets/uitslagen/CHA.pdf?url'

vuejs3 anchor vue-composition-api

回答 1 投票 0

选择某些元素，同时避免其他嵌套元素

我想用正则表达式查找并替换一些*innerHTML *。我想在整个文档中执行此操作，作用于除锚元素之外的所有内容。我想我可以用 queryselectorAll 来做到这一点，作者：

javascript node.js anchor queryselector

回答 2 投票 0

链接到 iFrame 中的锚点

我需要这方面的帮助。我知道有一些类似的主题，但我找不到解决我的问题的方法。我正在使用 Nicepage 桌面应用程序进行网页设计，具有一个域和一个内......

javascript html iframe cross-domain anchor

回答 1 投票 0

主播solana错误签名验证失败

我是一个新手，玩了一下，但不知道如何解决这个错误。我的计数器程序在操场上正常工作，我可以从 m 调用增加和减少函数...