HTML和XML直接处理页面导航的部分
单击按钮时出现不需要的蓝色选择突出显示（仅限 Safari）
我真的不确定该用什么标题来回答这个问题，所以我认为最好的解释方法是用一个片段： $(文档).ready(函数() { $(".navbar-toggle").on("点击", function () { ...
在本机应用程序中，当打开警报或对话框时，状态栏和系统导航栏变得透明，但在颤振系统导航栏中保持白色..请帮助我实现这一点。 在...
如何在不使用 javascript 或 JQuery 的情况下使导航栏按钮在单击时显示和隐藏 div/部分？
我正在为作业编写一个页面，导航栏中包含三个部分：业务计划、关于我们和联系我们。我有来自 codepen 的导航栏，我正在学习标签和无线电我......
我创建了一个changeColour函数，其中导航栏在滚动超过某个点后会改变颜色，效果完美。问题是我只想让它在我的主页上生效......
我目前正在开发一个网站，我需要一个宽导航栏，其中只有三个链接/“按钮”。问题是所有所谓的按钮都是不同颜色的（附有
我有一个使用 Boostrap 3 的导航菜单，但我不知道如何禁用子菜单的“悬停时”功能。我希望子菜单仅在单击时打开。 https://jsfiddle.net/elalgarro/q1vd...
我正在尝试创建一个示例响应式网页，带有适用于大屏幕和小屏幕的导航栏。我已经完成了大屏幕的部分。我正在尝试为较小屏幕设备创建，...
我的 Navbar.jsx 组件代码有问题。我已经实现了一个功能，导航栏背景和文本在滚动上改变颜色，效果很好，但我想要的是：悬停
我有一个基本网站，其中应该有一个显示在所有元素下方的背景图像，但是当我显示它时，它永远不会显示在导航栏下方。这甚至发生在...
我正在尝试更改 Bootstrap 中编码的导航栏的颜色。到目前为止，已经内置了应用于导航栏的 Bootstrap 类来更改背景颜色和锚点链接...
使用“position:absolute”保持元素相对于另一个元素
我正在尝试向导航栏添加一个内部带有图像的圆圈。圆圈必须比导航栏大，如下图所示： 我使用“位置：绝对”，所以圆圈保持在那个位置
在 ReactJS 中显示用户个人资料之前，导航栏中显示注册和登录按钮闪烁/闪烁
我有一个导航栏组件，将显示登录和注册按钮，但如果用户登录，它将显示用户名。从API获取用户数据，必须有accessToken才能获取用户数据...
我使用react和boostrap 5来构建网站，我仍然是学习css和bootstrap5的新手。我需要一点帮助，因为我无法将导航栏放在背景图像上并使其固定......
我只是在学习，所以不要轻视我的 HTML 和 CSS :) 我正在为我的顶部导航栏苦苦挣扎。它不断被我的造型卡超越。它位于顶部并迫使我的顶部导航栏位于下方。我是...
在 React 中使用 Tailwind CSS 突出显示单击时的活动导航项
我有一个这样的导航栏： 我有一个这样的导航栏： <nav className="bg-white shadow dark:bg-gray-800"> <div className="container flex items-center justify-center p-6 mx-auto text-gray-600 capitalize dark:text-gray-300"> <Link to="/home" className="text-gray-800 transition-colors duration-300 transform dark:text-gray-200 border-b-2 border-blue-500 mx-1.5 sm:mx-6" > home </Link> <Link to="/invoices" className="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-300 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6" > features </Link> <Link to="/forms" className="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-300 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6" > forms </Link> <Link to="/newForm" className="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-300 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6" > form2 </Link> </nav> 我想在点击时更改导航项，但在 Stackoverflow 中我搜索过的所有地方都只找到了 NestJS、Next.js 等的解决方案，而不是 React。 您应该在 tailwindCSS 中的 className 上使用 active 变体。 例如： <Link to="/home" className="text-gray-300 active:text-blue-500" > home </Link> 您确实需要首先定义如何确定是否添加该类。 在我看来，你想改为循环浏览你的项目： const isCurrentPage = (href: string) => { // return true if `href` is the current path, many ways you could do this } // loop through your items and conditionally add the class if active... ['/home', '/invoices', '/forms'].map(href => <Link key={href} href={href} className={isCurrentPage(href) ? 'active' : ''} /> 您的 isCurrentPage 功能取决于您的应用程序逻辑和设置；你可能可以依靠像window.location.pathname.indexOf(href) === 0这样的逻辑来开始。 当 NavLink 组件被视为活动时，默认情况下会自动接收“活动”类，从而允许您应用 CSS 来设置样式。 因此，在您的index.css文件中，添加： @tailwind base; @tailwind components; @tailwind utilities; .active{ /* Add whatever CSS style will make your link look active. The example below (in my case) */ @apply block py-2 pl-3 pr-4 text-white bg-orange-700 rounded md:bg-transparent md:text-orange-700 md:p-0 underline; } 就是这样。希望这有帮助！
我根据此示例创建了一个可访问的优先级菜单：https://www.codementor.io/@marys/flexbox-priority-navigation-1bussno6uj。 我还为三类用户添加了登录功能...
我有一个 Astro 静态网页。其中一个组成部分是： 我有一个 Astro 静态网页。其中一个组成部分是： <nav class="p-5 shadow md:flex md:items-center md:justify-between fixed w-full top-0" > <div class="flex justify-between items-center"> <a href="/" class="text-2xl cursor-pointer"> <img class="h-10 inline" src="/img/logo.png" alt="Logo Image" /> Bookingfy</a > <span class="text-3xl cursor-pointer mx-2 md:hidden block" ><ion-icon name="menu"></ion-icon></span > </div> <ul class="md:flex md:items-center md:z-auto md:static absolute w-full left-0 md:w-auto md:py-0 py-4 md:pl-0 pl-7 md:opacity-100 opacity-0 top-[-400px] transition-all ease-in duration-500" > <li class="mx-4 my-6 md:my-0"> <a href="/generals" class="text-xl hover:text-orange-300 duration-500" >Características</a > </li> <li class="mx-4 my-6 md:my-0"> <a href="/pricing" class="text-xl hover:text-orange-300 duration-500">Precios</a > </li> <li class="mx-4 my-6 md:my-0"> <a href="/about" class="text-xl hover:text-orange-300 duration-500" >Sobre Nosotros</a > </li> <li class="mx-4 my-6 md:my-0"> <a href="/contact" class="text-xl hover:text-orange-300 duration-500">Contacto</a > </li> </ul> </nav> <style> nav { background-color: #13151a; z-index: 999; } ul { background-color: #13151a; } </style> <script> document.addEventListener("DOMContentLoaded", function () { let icon = document.querySelector("ion-icon")!; icon.addEventListener("click", function () { if (icon.getAttribute("name") === "menu") { icon.setAttribute("name", "close"); document.querySelector("ul")!.classList.add("top-[80px]"); document.querySelector("ul")!.classList.add("opacity-100"); document.querySelector("ul")!.classList.add("z-10"); } else { icon.setAttribute("name", "menu"); document.querySelector("ul")!.classList.remove("top-[80px]"); document.querySelector("ul")!.classList.remove("opacity-100"); } }); }); </script> 这个组件位于名为 Layout.astro 的布局内部： --- import Footer from "../components/Footer.astro"; import Header from "../components/Header.astro"; import "../styles/Layout.scss"; import { ViewTransitions } from "astro:transitions"; interface Props { title: string; } const { title } = Astro.props; --- <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="description" content="Astro description" /> <meta name="viewport" content="width=device-width" /> <link rel="icon" type="image/svg+xml" href="/img/logo.png" /> <meta name="generator" content={Astro.generator} /> <title>{"Bookingfy | "+title}</title> <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js" ></script> <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js" ></script> <ViewTransitions /> </head> <body> <Header /> <main> <slot /> </main> <Footer /> </body> </html> 问题在于当我们处于小屏幕时导航栏的行为。当以前我不导航其他应用程序页面时，导航栏可以工作。然而，例如，当我输入一个导航栏选项（例如“Características”）并尝试重新打开导航栏时，这不起作用。导航栏不显示选项。我不明白这种行为。您可以将代码复制到一个 Astro 项目中并执行该代码以便更好地理解。有人可以给我一些帮助吗？预先感谢您。 基本上，Astro 会在 Header 组件中编译你的 JS 代码 一旦你移动到另一个页面，它就会失去它的位置 因此将指令传递给脚本以确保它是：全局 将使您的代码全局可用，这将解决问题 这是一个有点肮脏的解决方案，但是是的，你可以做其他事情，比如将此脚本附加到主布局，我们的但所有脚本都在一个文件中，但它在标题中 <script is:global> document.addEventListener("DOMContentLoaded", function () { let icon = document.querySelector("ion-icon")!; icon.addEventListener("click", function () { if (icon.getAttribute("name") === "menu") { icon.setAttribute("name", "close"); document.querySelector("ul")!.classList.add("top-[80px]"); document.querySelector("ul")!.classList.add("opacity-100"); document.querySelector("ul")!.classList.add("z-10"); } else { icon.setAttribute("name", "menu"); document.querySelector("ul")!.classList.remove("top-[80px]"); document.querySelector("ul")!.classList.remove("opacity-100"); } }); }); </script>
如何将props传递给react-bootstrap的Nav.Link
我正在使用以下导航栏。我想传递一些道具给 Nav.Link。我不知道如何将属性传递给 Nav.Link。或者就像 HTML href="a.html?param=test" 一样？ 常量导航...
我想要一个自定义导航栏，如下所示： 居中标志 左侧有 3 个菜单按钮（可折叠） 右侧有 2 个图标（帐户和 Instagram）（始终展开） 当倒塌时，我希望看到
我正在尝试在 ASP.NET Core 8 Blazor 网站中使用 Bootstrap NavBar。我正在使用 Bootstrap 5.x。这样做时，菜单项不会按预期水平排列，下拉菜单也不起作用。