`<nav>`元素是新的HTML5元素，它定义了一段导航链接。
我希望有人单击导航栏上的下载按钮时弹出窗口，但在尝试使其正常工作时遇到了问题。 这是一个示例网站。 （rubberduckvba.com）我...
我想在简单的导航栏上放置分隔元素的边框。但边界出现在错误的地方。 * { 字体系列：Arial、Helvetica、sans-serif； 保证金：0； 帕丁...
我创建了一个带有切换按钮的响应式移动导航栏。人们可以通过单击来打开和关闭切换按钮。但是，当单击移动导航栏中的链接时，页面会滚动......
我的子菜单与其父菜单显示在同一行，我想从顶部显示它意味着每个子菜单 ul 与顶部没有间隙。 现在运行良好，只是需要将间隙从
NVDA 的元素列表无法识别 <nav> 中的 <header>（如果它是第一个直接子元素）
有人经历过这种情况吗？如果有，你有解释和/或解决方案吗？基本上，如果您有以下标记，“主要”导航将不会在 NVDA 中被识别，除非...
下拉导航不适用于移动设备（JavaScript、HTML、CSS）
我使用 JS 和 SCSS 构建了一个导航。在桌面上它工作得很好，一些移动设备（如 Galaxy S10）也显示下拉菜单。但当我点击...时，大多数其他移动设备什么也不做。
当前使用 bootstrap 5.0（只是直接的 html/css），并且无法确定如何获取锚链接来打开选项卡。 ... 当前使用 bootstrap 5.0（只是直接 html/css），并且无法确定如何获取锚链接来打开选项卡。 <div class="tab-content" id="tabContent"> <div class="tab-pane fade show active" id="home"> CONTENT FOR HOME </div> <div class="tab-pane fade show" id="onboard"> <a href="#build" data-bs-toggle="tab" data-bs-target="#build">Show Build tab</a> </div> <div class="tab-pane fade show active" id="build"> CONTENT FOR HOME </div> </div> <ul class="info-navigation" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Start</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-onboard-tab" data-bs-toggle="pill" data-bs-target="#onboard" type="button" role="tab" aria-controls="pills-onboard" aria-selected="false">1</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-build-tab" data-bs-toggle="pill" data-bs-target="#build" type="button" role="tab" aria-controls="pills-build" aria-selected="false">2</button> </li> </ul> 只是希望能够在选项卡面板本身中添加锚链接或按钮，以打开下一个/目标选项卡。 尝试使用data-bs-toggle="pill" data-bs-target="#build"但并没有真正起作用。 您可以利用 Bootstrap 的 JavaScript API。通过在链接中添加事件监听器并使用Tab.show()方法，您可以切换到您需要的选项卡 参考链接：https://getbootstrap.com/docs/5.3/components/navs-tabs/#methods document.getElementById('openBuildTab').addEventListener('click', function(event) { event.preventDefault(); var buildTab = new bootstrap.Tab(document.getElementById('pills-build-tab')); buildTab.show(); }); <div class="container mt-5"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-onboard-tab" data-bs-toggle="pill" data-bs-target="#onboard" type="button" role="tab" aria-controls="pills-onboard" aria-selected="false">Onboard</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-build-tab" data-bs-toggle="pill" data-bs-target="#build" type="button" role="tab" aria-controls="pills-build" aria-selected="false">Build</button> </li> </ul> <div class="tab-content" id="tabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="pills-home-tab"> CONTENT FOR HOME </div> <div class="tab-pane fade" id="onboard" role="tabpanel" aria-labelledby="pills-onboard-tab"> <a href="#" id="openBuildTab">Show Build tab</a> </div> <div class="tab-pane fade" id="build" role="tabpanel" aria-labelledby="pills-build-tab"> CONTENT FOR BUILD </div> </div> </div>
Bootstrap 5 导航栏包含下拉菜单。 下拉菜单有下划线热键，例如 a,n,s,e ： Bootstrap 5 导航栏包含下拉菜单。 下拉菜单有下划线热键，如 a、n、s、e : <div class="btn-group"> <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Action </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#"><u>A</u>ction</a></li> <li><a class="dropdown-item" href="#">A<u>n</u>other action</a></li> <li><a class="dropdown-item" href="#"><u>S</u>omething else here</a></li> <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">S<u>e</u>parated link</a></li> </ul> </div> 键盘按下按键如何激活菜单项？例如，如果下拉菜单打开，按 A 应该像单击操作菜单项一样。 jsfiddle：https://jsfiddle.net/b6or2s5e/ 左右箭头已使用处理 如何使用左右箭头键在引导导航栏中导航 document.addEventListener("DOMContentLoaded", function () { document.querySelectorAll('.dropdown').forEach(function (el) { el.addEventListener('shown.bs.dropdown', function () { document.addEventListener('keydown', function (e) { const click = new MouseEvent("click", { bubbles: true, cancelable: true, view: window, }) if (e.key === "ArrowRight") { const o = getNextSibling(e.target.closest('.dropdown'), '.dropdown') if (!o) { document.querySelector('.dropdown-toggle').dispatchEvent(click) } else { o.querySelector('.Xdropdown-toggle').dispatchEvent(click) } } else if (e.key === "ArrowLeft") { const o = getPrevSibling(e.target.closest('.dropdown'), '.dropdown') if (!o) { const ar = document.querySelectorAll('.dropdown-toggle') ar[ar.length - 1].dispatchEvent(click) } else { o.querySelector('.dropdown-toggle').dispatchEvent(click) } } }, { once: true }) }) }) }) 如何添加热键处理？ 这是一个采用动态方法的更新代码片段，方法是获取 下划线元素，并在 下划线元素上使用 forEach 循环 nodelist 将 window 上的 keydown 事件与每个 进行比较带下划线的元素 textContent 转换为小写。 如果没有按下alt或ctrl，是否可以删除switch switch语句并为任何键调用findUnderlined？ 我相信您在问是否可以添加 control 和/或 alt 键，不是 100% 确定您的问题在这里，但您可以添加任何条件来控制您想要使用 keydown 控制的内容。只需将逻辑添加到条件中即可。 请参阅下面片段中的更多注释... document.addEventListener("DOMContentLoaded", function() { // define a dropdownMenu variable using the dropdown instatiation button const dropdownMenu = document.querySelector('.dropdown-menu'); // helper method passing in the underlined elements nodelist // and both the action click and window keydown events const setClickForUnderlinedEls = (els, target, key) => { // get the dropdown parent element using the // event.target => target.nextElementSibling // you could also go with .closest() and then querySelectorAll() const nextEl = target.nextElementSibling; // loop over the underline elements nodelist els.forEach(sec => { // conditional to compare each nodelist with // the key that was actually pressed if (key === sec.textContent.toLowerCase()) { // instantiate a click for the corresponding matching // element that has the underlined element within it sec.click() } }) } // get the dropdown expansion button, I used an ID for this // as the class .btn is pretty common for bootstrap buttons const action = document.querySelector('#dropdown-btn'); // define a variable for the underline elements nodelist const sections = dropdownMenu.querySelectorAll('li u'); // click event for the dropdown button action.addEventListener('click', (event) => { // window event listener for keydown addEventListener('keydown', function(e) { // conditional to make sure the dropdown is opened // using the aria-expanded attribute if (event.target.ariaExpanded !== 'false') { // run helper function and pass in // nodelist, target parent element and keydown event.key params setClickForUnderlinedEls(sections, event.target, e.key); } }) }) }) document.addEventListener("DOMContentLoaded", function() { const dropdownMenu = document.querySelector('.dropdown-menu'); const action = document.querySelector('#dropdown-btn'); const sections = dropdownMenu.querySelectorAll('li u'); const setClickForUnderlinedEls = (els, target, key) => { const nextEl = target.nextElementSibling; els.forEach(sec => { if (key === sec.textContent.toLowerCase()) { sec.click() } }); } action.addEventListener('click', (event) => { addEventListener('keydown', (e) => { if (event.target.ariaExpanded !== 'false') { setClickForUnderlinedEls(sections, event.target, e.key); } }); }) }); #vertical-space, #section1, #section2, #section3, #section4, #section5{ height: 100vh; } <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script> <!-- Example single danger button --> <div class="btn-group" id="top"> <!--/ Added the id dropdown-btn for this example /--> <button id="dropdown-btn" type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Action </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#section1"><u>A</u>ction</a></li> <li><a class="dropdown-item" href="#section2">A<u>n</u>other action</a></li> <li><a class="dropdown-item" href="#section3"><u>W</u>e have a link</a></li> <li><a class="dropdown-item" href="#section4"><u>S</u>omething else here</a></li> <li> <hr class="dropdown-divider"> </li> <li><a class="dropdown-item" href="#section5">S<u>e</u>parated link</a></li> </ul> </div> <!--/ added purely for example /--> <div id="vertical-space"> </div> <div id="section1"> <p> You pressed the <strong>a</strong> button and instantiated a click on the <em>Action</em> button. <a href="#top">Back to top</a> </p> </div> <div id="section2"> <p> You pressed the <strong>n</strong> button and instantiated a click on the <em>Another action</em> button. <a href="#top">Back to top</a> </p> </div> <div id="section3"> <p> You pressed the <strong>w</strong> button and instantiated a click on the <em>We have a link</em> button. <a href="#top">Back to top</a> </p> </div> <div id="section4"> <p> You pressed the <strong>s</strong> button and instantiated a click on the <em>Something else here</em> button. <a href="#top">Back to top</a> </p> </div> <div id="section5"> <p> You pressed the <strong>e</strong> button and instantiated a click on the <em>Separate link</em> button. <a href="#top">Back to top</a> </p> </div>
我在网站上有一个导航栏，我希望其背景颜色为黄色，文本为黑色。当鼠标悬停在某个项目上时，背景将为黑色，文本为黄色。 我的问题是...
我在网站上有一个导航栏，我希望其背景颜色为黄色，文本为黑色。当鼠标悬停在某个项目上时，背景将为黑色，文本为黄色。 我的问题是...
如何选择悬停下划线列表项效果的导航列表中的第一项以保持下划线？
我希望导航中列表中的第一个项目保持下划线，其余项目在悬停时加下划线，只有第一个项目不加下划线，直到我将鼠标悬停在另一个列表项上。我已经...
需要一些帮助来了解为什么我的链接没有位于应有的位置。 只有第一个孩子似乎在应有的位置上对齐。 发行图片 导航栏问题如图所示 超文本标记语言 &... 需要一些帮助来了解为什么我的链接没有位于应有的位置。 只有第一个孩子似乎在它应该对齐的地方。 问题图片 如图所示的导航栏问题 HTML <nav> <ul> <li><a href="#"><img src="images/oms.png" style="height: 45px;"></li> <li><a href="#">Services</li> <li><a href="#">About</li> <li><a href="#">Contact</li> </ul> </nav> CSS *{ margin: 0; padding: 0; } body{ min-height: 100vh; background-image: url(images/bgimage.avif); background-size: cover; background-repeat: no-repeat; background-position: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } nav{ background-color: white; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1); } nav ul{ width: 100%; display: flex; justify-content: flex-end; align-items: center; list-style: none; } nav li{ height: 50px; } nav a{ height: 100%; padding: 0 30px; display: flex; align-items: center; color: black; text-decoration: none; } nav a:hover{ background-color: #f0f0f0; } nav li:first-child{ margin-right: auto; } 只有第一个子项位于导航栏中，而所有其他列表项都位于下方。 任何帮助都会很棒。非常感谢！ 起初我以为这可能是因为我为图像设置了尺寸。 我从问题中删除了图像，然后下一个列表项成为第一个子项，但其余元素的问题仍然存在。 我尝试将 nav a 元素的边距设置为 0，但仍然没有成功。 你的问题可能是使用导航来证明结束
我正在构建一个抓取网站的程序。 它查看整个网站，仅获取该网站的页眉和页脚导航菜单，然后插入新的 html 标签（div、p、table 等...
W3Schools.com，我很确定我记得看到 W3C.org 声明 应用于工具栏菜单和列出表单控制命令。 那么，我应该使用哪一个作为我的主菜单？... W3Schools.com，我很确定我记得看到 W3C.org 声明 <menu> 应用于工具栏菜单和列出表单控制命令。 那么，我应该使用哪一个作为我的主菜单？ Nav，还是Menu？有关系吗？ nav 用于内部链接组（a 元素）。一般来说，这意味着链接应该转到单独的页面，或者在 AJAX 页面的情况下更改内容。单击 nav 项目时，预计内容会发生某种变化。 menu 用于控件组（a、input、button）。一般来说，这意味着输入应该在页面内执行功能。单击 menu 项目时，预计会出现某种 JavaScript 交互。 nav：网站的导航。 menu：Web 应用程序的菜单。 这里有一篇关于 nav 的 HTML5Doctor 帖子，其中有一节介绍了它与 menu 的不同之处（基本上，在实际应用程序中使用它）。看起来你想要nav。 获得这个答案的最佳途径是 HTML 5 本身的标准。 Menu 在 HTML 5.1 第二版 中定义。 它，“...代表一组命令。” Nav 在 HTML 5 中定义。 它是“...页面的一部分，链接到其他页面或其中的部分 页面：带有导航链接的部分。” 有一些我没有包含但认为很重要的导航注释，但我认为您最好从标准中自己获取定义。 本文中标记为答案的定义接近正确，但其中包含无关的陈述，导致答案本身是错误的。 与 <menu> 通常用于上下文菜单。 MDN 有很好的文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu <nav> 是一个部分（如 <section> 或 <article>），因此它将出现在 HTML 文档大纲中。因此，99% 的时间我都会使用 <menu>。对我来说，<nav> 是 <section> 和 <menu> 之间的混合，另外还有一个限制：<nav> 应该专门用于导航，而 <menu> 可以用于任何可能被称为菜单的东西（包括导航栏）。所以大多数导航栏，尽管是导航栏，但并不符合<nav>的严格要求，而<menu>更合适。 在我的 Web 开发生涯中，我从未发现过希望我的导航栏成为文档大纲的一部分的情况。 我要从类似问题复制我的答案： 关于 <menu> 标签，接受的答案是错误/过时的。这就是 MDN 关于 <menu> 标签的说法： <menu> HTML 元素在 HTML 规范中被描述为 <ul> 的语义替代，但被浏览器（并通过可访问性树公开）视为与 <ul> 没有什么不同。它表示一个无序列表的项目（由 <li> 元素表示）。 以及使用说明： <menu>和<ul>元素都表示无序列表的项目。主要区别在于 <ul> 主要包含用于显示的项目，而 <menu> 用于交互项目。 所以语义上最正确的布局是这样的： <nav> <menu> <li>Menu Item One</li> <li>Menu Item Two</li> <li>Menu Item Three</li> </menu> </nav>
我刚刚开始学习HTML和CSS，我想制作一个导航栏。我遇到了一个问题，当我将鼠标悬停在链接上时，每个链接下面都有这种奇怪的填充，如图 1 所示...
我最近开始使用 HTML 和 CSS 编写我的网站，今天，我从朋友那里得到信息，我的网站在其他浏览器中看起来不太好，然后我用其他浏览器交叉检查了我的网站...
我不确定我哪里出了问题，但我的子菜单项后面/下面有一行，它将转换为单词的宽度，请参见此处：工作 我对 cl 做了一些更改...
我是一名初学者编码器，一直在尝试让我的顶部导航栏与我的链接一起在选项卡之间切换。它显示选项卡正在 URL 中切换，但它不会改变内容
如何确保导航动态延伸到每个页面的底部？我对 CSS 和 HTML 还很陌生，所以如果有任何明显错误，请原谅我。但我一生都无法弄清楚这一点......
所以，我用从 json 文件中提取的不同语言（例如 en.json、fr.json 等）制作了一个网站。当然我也想翻译一下菜单点： 因此，我使用从 json 文件中提取的不同语言（例如 en.json、fr.json 等）制作了一个网站。当然我也想翻译菜单点： <div class="nav-container"> <span class="logo lato-bold">DacHOW<i class="fa-regular fa-circle-question"></i></span> <nav class="nav"> <ul class="nav-ul"> <li class="nav-link" ><a href="#home">HELLO</a></li> <li class="nav-link" lang-attribute="m-first-steps"><a href="#first-steps"></a></li> <li class="nav-link" lang-attribute="m-asylum"><a href="#asylum"></a></li> <li class="nav-link" lang-attribute="m-financial-aid"><a href="#financial-aid"></a></li> <li class="nav-link" lang-attribute="m-healthcare"><a href="#healthcare"></a></li> <li class="nav-link" lang-attribute="m-education"><a href="#education"></a></li> <li class="nav-link" lang-attribute="m-support"><a href="#support"></a></li> <li class="nav-link" lang-attribute="m-contacts"><a href="#contacts"></a></li> </ul> </nav> <span class="hamburger-menu material-symbols-outlined"><i class="fa-solid fa-bars"></i></span> <div class="dropdown-language container"> <button class="dropbtn" id="dropbtn"> English <i class="fa fa-caret-down" id="arrow"></i> </button> <div class="dropdown-content" id="dropdown-content"> <a href="index.html" onclick="changeLanguage('en')">English</a> <a href="index.html" onclick="changeLanguage('fr')">French</a> <a href="index.html" onclick="changeLanguage('ar')">Arabic</a> <a href="#">Link 3</a> </div> </div> </div> 当我注意到时，我尝试向聊天GPT寻求帮助，他们建议添加js函数来专门拉取菜单内容。这没有帮助。 // NAVIGATION // // Mobile Hamburger Navbar: opening on click const hamburgerMenu = document.querySelector(".hamburger-menu"); const nav = document.querySelector(".nav"); // Hamburger Menu opens and closes when clicked hamburgerMenu.addEventListener("click", () => { nav.classList.toggle("active"); }); // When on mobile, once user clicked the menu point they want to go to, it closes const navLinks = document.querySelectorAll('.nav-link a'); navLinks.forEach(function(link) { link.addEventListener('click', function() { nav.classList.remove('active'); }); }); // LANGUAGE DROPDOWN SELECTION BUTTON // // Language Dropdown const dropdownBtn = document.getElementById("dropbtn"); const dropdownMenu = document.getElementById("dropdown-content"); const toggleArrow = document.getElementById("arrow"); // Toggle dropdown function const toggleDropdown = function () { dropdownMenu.classList.toggle("show"); toggleArrow.classList.toggle("arrow"); }; // Toggle dropdown open/close when dropdown button is clicked dropdownBtn.addEventListener("click", function (e) { e.stopPropagation(); toggleDropdown(); }); // Close dropdown when dom element is clicked document.documentElement.addEventListener("click", function () { if (dropdownMenu.classList.contains("show")) { toggleDropdown(); } }); // LANGUAGE SELECT/SAVE/CHANGE FUNCTIONALITY // // Function to save the language preference in localStorage function setLanguagePreference(lang) { localStorage.setItem('language', lang); } // Function to update the site content based on selected language function updateContent(langData) { document.querySelectorAll('[lang-attribute]').forEach(element => { const key = element.getAttribute('lang-attribute'); element.textContent = langData[key]; }); } // Function to fetch language data from json files async function fetchLanguageData(lang) { const response = await fetch(`languages/${lang}.json`); return response.json(); } // CHAT GPT ADDED: Function to update the menu items with language-specific text async function updateMenuItems(lang) { const langData = await fetchLanguageData(lang); const navLinks = document.querySelectorAll('.nav-link'); navLinks.forEach((link, index) => { const menuItemKey = link.getAttribute('lang-attribute'); const menuItemText = langData[menuItemKey]; link.querySelector('a').textContent = menuItemText; }); } // CHAT GPT ADDED: Call updateMenuItems() on page load window.addEventListener('DOMContentLoaded', async () => { const userPreferredLanguage = localStorage.getItem('language') || 'en'; await updateMenuItems(userPreferredLanguage); }); // Function to change language from one to another async function changeLanguage(lang) { setLanguagePreference(lang); const langData = await fetchLanguageData(lang); updateContent(langData); // Update language displayed in the dropdown button const languageNames = { 'en': 'English', 'fr': 'French', 'ar': 'Arabic' }; document.getElementById('dropbtn').innerHTML = `${languageNames[lang]} <i class="fa fa-caret-down" id="arrow"></i>`; // Change text direction based on the selected language if (lang === 'ar') { document.body.setAttribute('dir', 'rtl'); } else { document.body.setAttribute('dir', 'ltr'); } } // Call updateContent() on page load window.addEventListener('DOMContentLoaded', async () => { const userPreferredLanguage = localStorage.getItem('language') || 'en'; const langData = await fetchLanguageData(userPreferredLanguage); updateContent(langData); // Update language displayed in the dropdown button const languageNames = { 'en': 'English', 'fr': 'French', 'ar': 'Arabic' }; document.getElementById('dropbtn').innerHTML = `${languageNames[userPreferredLanguage]} <i class="fa fa-caret-down" id="arrow"></i>`; // Change text direction based on the preferred language if (userPreferredLanguage === 'ar') { document.body.setAttribute('dir', 'rtl'); } else { document.body.setAttribute('dir', 'ltr'); } }); 请问您知道如何使我的导航链接可点击吗？ 我认为问题在于菜单链接是 json 生成的，因此在 html 中锚链接是空的。我添加了一个不是生成的 json，只需输入一些文本即可单击。 我也尝试过 Chat GPT，但没有太大帮助。 亲爱的丽莎，你不应该在锚点上同时拥有 href 和 onclick 事件...... <a href="index.html" onclick="changeLanguage('en')">English</a> 应该是其中之一。 此外，您的 href 只是重新加载您的主程序 index.html，因此最好删除 href。 所以你可以这样做... <a onclick="changeLanguage('en');">English</a> 或者这个... <a href="javascript:changeLanguage('en');">English</a> 它们都应该有效，尽管可以说后者更“明智”，因为它是一个锚点，并且您应该使用 href。 哦等等，您实际上是指在更改语言后重新加载页面吗？