navbar 相关问题

我正在尝试为导航栏链接创建一个活动类，因为文本在选择后不会改变。我只是想知道我可能哪里出错了。我正在尝试为导航栏链接创建一个活动类，因为选择后文本不会更改。我只是想知道我哪里可能出错了。 <NavLink exact to="/" activeClassName="text-white" className="inflex-flex items-center py-6 px-3 mr-4 text- red-200 hover:text-green-800 text-4xl font-bold cursive tracking-widest" activeClassName="text-black" > Home </NavLink> <NavLink to="/project" className="inline-flex items-center py-3 px-3 my-6 rounded text-red-200 hover:text-green-800" activeClassName="text-red-100 bg-red-700" > Projects </NavLink> <NavLink to="/post" className="inline-flex items-center py-3 px-3 my-6 rounded text-red-200 hover:text-green-800" activeClassName="text-red-100 bg-red-700" > Blog Posts </NavLink> <NavLink to="/about" className="inline-flex items-center py-3 px-3 my-6 rounded text-red-200 hover:text-green-800" activeClassName="text-red-100 bg-red-700" > 尝试做 activeClassName='!text-red-100 !bg-red-700' 您的链接的悬停颜色可能会覆盖文本颜色。您可以尝试添加红色作为活动状态的悬停颜色： activeClassName="text-red-100 hover:text-red-100 bg-red-700" className={({ isActive }) => 活跃？ “text-blue-700 字体粗体下划线”：“” }

reactjs navbar tailwind-css classname

回答 3 投票 0

带有 Bootstrap 的 Vue js，导航栏菜单不起作用

我在Vue js上实现了一个导航栏菜单，它是响应式的，它非常适合桌面，但是当我测试响应式模式时，菜单不起作用，这是按钮切换：我在 Vue js 上实现了一个导航栏菜单，它是响应式的，它非常适合桌面，但是当我测试响应式模式时，菜单不起作用，这是按钮切换： <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation" > <i class="fas fa-bars"></i> </button> 我的侧边栏上有： <nav id="sidebarMenu" class="collapse d-lg-block sidebar collapse bg-white"> 你可以看到参考文献sidebarMenu所以，我不知道出了什么问题？我在 CodesandBox.io 上加载我的代码你可以检查一下并告诉我出了什么问题吗？请你需要使用 vue 指令而不是 data-toggle 和 data-target ...这是在 vue 中应该如何完成的： <template> <div>  <button class="navbar-toggler" type="button" @click="toggleSidebar" > <i class="fas fa-bars"></i> </button>  <nav id="sidebarMenu" :class="{ 'collapse': !sidebarOpen, 'd-lg-block': sidebarOpen, 'bg-white': sidebarOpen }" >  </nav> </div> </template> <script> export default { data() { return { sidebarOpen: true, // Initial state, you can set it to false if you want it closed by default }; }, methods: { toggleSidebar() { // Toggle the sidebarOpen state this.sidebarOpen = !this.sidebarOpen; }, }, }; </script>

vue.js navbar boot

回答 1 投票 0

单击时将活动类添加到导航栏元素

我是用导航栏创建的，我没有做过太多的Web开发。我是用导航栏创建的，我没有做过太多的Web开发。 <nav class="navbar navbar-custom navbar-light navbar-expand-md justify-content-center"> <button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2"> <ul class="navbar-nav mx-auto text-center"> <li class="nav-item"><a class="nav-link" href="index.html"><strong style="text-transform:uppercase">home</strong></a></li> <li class="nav-item"><a class="nav-link" href="about.html"><strong style="text-transform:uppercase">about</strong></a></li> <li class="nav-item"><a class="nav-link" href="flights.html"><strong>FLIGHTS</strong></a></li> <li class="nav-item"><a class="nav-link" href="hotels.html"><strong>HOTELS</strong></a></li> <li class="nav-item"><a class="nav-link" href="holidays.html"><strong>HOLIDAYS</strong></a></li> <li class="nav-item "><a class="nav-link" href="property.html"><strong>PROPERTY</strong></a></li> <li class="nav-item active"><a class="nav-link" href="car_hire.html"><strong>CAR HIRE</strong></a></li> </ul> </div> </nav> 此导航栏链接到所有其他页面的顶部，以减少代码的重复。有人可以帮助我编写代码，以便当单击菜单项时“活动”类被添加到 li 元素中。然后这会触发 css。 CSS： .nav-link.active { color: white; } 谢谢你您所要做的就是循环遍历链接，检查当前单击的链接是否与当前页面相同，然后将 active class 和 aria-current 设置为该项目。将此代码添加到您的 JavaScript 中 document.querySelectorAll(".nav-link").forEach((link) => { if (link.href === window.location.href) { link.classList.add("active"); link.setAttribute("aria-current", "page"); } }); 这里是纯 JavaScript 中满足您需求的完整代码。希望对你有帮助 const links = document.querySelectorAll('.nav-link'); if (links.length) { links.forEach((link) => { link.addEventListener('click', (e) => { links.forEach((link) => { link.classList.remove('active'); }); e.preventDefault(); link.classList.add('active'); }); }); } .nav-link.active { color: white; } <nav class="navbar navbar-custom navbar-light navbar-expand-md justify-content-center"> <button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2" > <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2" > <ul class="navbar-nav mx-auto text-center"> <li class="nav-item"> <a class="nav-link" href="index.html"> <strong style="text-transform: uppercase">home</strong> </a> </li> <li class="nav-item"> <a class="nav-link" href="about.html"> <strong style="text-transform: uppercase">about</strong> </a> </li> <li class="nav-item"> <a class="nav-link" href="flights.html"> <strong>FLIGHTS</strong> </a> </li> <li class="nav-item"> <a class="nav-link" href="hotels.html"> <strong>HOTELS</strong> </a> </li> <li class="nav-item"> <a class="nav-link" href="holidays.html"> <strong>HOLIDAYS</strong> </a> </li> <li class="nav-item"> <a class="nav-link" href="property.html"> <strong>PROPERTY</strong> </a> </li> <li class="nav-item active"> <a class="nav-link" href="car_hire.html"> <strong>CAR HIRE</strong> </a> </li> </ul> </div> </nav> 使用 classList 和 toggle document.querySelectorAll(".nav-item").forEach((ele) => ele.addEventListener("click", function (event) { event.preventDefault(); document .querySelectorAll(".nav-item") .forEach((ele) => ele.classList.remove("active")); this.classList.add("active") }) ); .active { color: green; } <ul class="navbar-nav mx-auto text-center"> <li class="nav-item"><a class="nav-link" ><strong style="text-transform:uppercase">home</strong></a></li> <li class="nav-item"><a class="nav-link" ><strong style="text-transform:uppercase">about</strong></a></li> <li class="nav-item"><a class="nav-link" ><strong>FLIGHTS</strong></a></li> <li class="nav-item"><a class="nav-link" ><strong>HOTELS</strong></a></li> <li class="nav-item"><a class="nav-link" ><strong>HOLIDAYS</strong></a></li> <li class="nav-item "><a class="nav-link" ><strong>PROPERTY</strong></a></li> <li class="nav-item active"><a class="nav-link" ><strong>CAR HIRE</strong></a></li> </ul> 我要疯了 <script> const links = document.querySelectorAll('.nav-link'); if (links.length) { links.forEach((link) => { link.addEventListener('click', (e) => { links.forEach((link) => { link.classList.remove('active'); }); e.preventDefault(); link.classList.add('active'); }); }); } </script> 适用于班级更改，但链接不起作用 //active nav bar //getting the link const fullLink = window.location.pathname; //isolating the page name const activeLink = fullLink.split('/').pop().replace('.html', ''); //passing the page name through the function function setActiveClass(elementId) { //getting the element that has the id of the page name const element = document.getElementById(elementId); //checking if the element is valid if (element) { //adding class active to the element element.classList.add('active'); } } //function getting called when page refresh of change of page and passing through the page name setActiveClass(activeLink); 在你的JS中添加以下代码： $(".nav-item").click(function() { $(".nav-item").removeClass("active"); // This will remove active classes from all <li> tags $(this).addClass("active"); // This will add active class in clicked <li> });

javascript html css html-lists navbar

回答 6 投票 0

如何使导航栏活动选项卡的高度比其他选项卡更大？

我想要实现的目标的示例：这是我的 HTML 代码：我想要实现的目标的示例：这是我的 HTML 代码： <ul class="nav nav-tabs flex-nowrap" id="myTab" role="tablist"> <li class="nav-item" style="margin-left: -1px"> <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" > About </button> </li> <li class="nav-item"> <button class="nav-link" id="personalize-tab" data-bs-toggle="tab" data-bs-target="#personalize" type="button" > Personslize </button> </li> <li class="nav-item"> <button class="nav-link" id="http-proxy-tab" data-bs-toggle="tab" data-bs-target="#http-proxy" type="button" > Http Title </button> </li> <li class="nav-item" id="data-processor-display" style="display: none"> <button class="nav-link" id="data-processor" data-bs-toggle="tab" data-bs-target="#data-processor-click" type="button" > DSP Titel </button> </li> <li class="nav-item" id="mate-setting-display" style="display: none"> <button class="nav-link" id="mate-settings" data-bs-toggle="tab" data-bs-target="#mate-setting-click" type="button" > MS Title </button> </li> <li class="nav-item" id="mate-manage-display" style="display: none"> <button class="nav-link" id="mate-manage" data-bs-toggle="tab" data-bs-target="#mate-manage-click" type="button" > MM Title </button> </li> </ul> 这是我尝试过的CSS： .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: rgb(5, 5, 5); background-color: rgb(249, 249, 249); border: 1px solid rgb(198 198 198); height: 22px; border-bottom: 1px solid transparent; } 我正在使用引导程序，data-bs-toggle="tab"。我希望活动选项卡比其他选项卡高一点。您可以通过在活动选项卡上使用负边距并增加底部填充相同的精确距离来实现此目的。示例： .nav-link.active { margin-top: -2px; padding-bottom: calc(0.5rem + 2px) } 在上面的CSS中，2px是活动项目向上移动的距离，不影响其他任何东西。注意，我将 padding-bottom 设置为 calc(0.5rem + 2px)，因为选项卡控件上的默认引导底部填充是 0.5rem。如果您使用的主题将该填充设置为不同的值，则需要进行相应的调整。看到它工作了： body { padding-top: 2rem; } .nav-link.active { margin-top: -2px; padding-bottom: calc(0.5rem + 2px) } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous" /> <body> <div class="container"> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true" > Home </button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false" > Profile </button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false" > Contact </button> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab" > ... </div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" > ... </div> <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab" > ... </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous" ></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous" ></script> </body>

html css bootstrap-4 navbar nav

回答 1 投票 0

如何保持粘性导航栏和顶部锚点？

我对 html 和 css 还很陌生，正在为我正在学习的课程设计一个模拟作品集。这是一个单页作品集，我们得到的指示是每个部分必须 100% 高度指定...

html css navbar nav

回答 1 投票 0

React-Spring 视差层内的可点击组件不起作用？

我正在尝试使用 React Spring 在我的视差层之一中构建一个导航栏。导航栏按钮不可点击，我很困惑为什么。我一直在四处寻找...

navbar parallax react-spring

回答 1 投票 0

如何在 Bootstrap 5 中将两个导航栏元素放在末尾？

我试图将两个导航栏元素放置到 Bootstrap 5 中导航栏的末尾，但它不起作用我尝试过使用 ms-auto 在登录和注册元素周围封装一个 div，但这并没有...

html navbar bootstrap-5

回答 1 投票 0

将<a class="navbar-brand" href="index.html">文字</a>制作成img

我该如何转动 QuadroStudios 进入我的导航栏的图像代码这是我的代码我怎样才能转 <a class="navbar-brand" href="index.html"> QuadroStudios </a> 进入我的导航栏的图像代码这是我的代码 <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>QuadroStudios</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" type="text/css" media="screen" href="about.css" />  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" /> </head> <style> body { background-color: #212529; overflow-x: hidden; } .about { position: relative; top: 25px; left: 10px; color: white; } .title { color: white; font-size: 25px; font-family: Inconsolata; } .storehauled { position: relative; top: 100px; left: 30px; color: white; font-size: 20px; font-family: Inconsolata; } </style> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="index.html"> QuadroStudios </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="home.html">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="update.html"> Updates </a> </li> <li class="nav-item"> <a class="nav-link" href="leaks.html"> Leaks </a> </li> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="about.html"> About </a> </li> </ul> </div> </div> </nav> <div class="about"> <h1 class="title"> Here you can find info about our games and what QuadroStudios is about! </h1> </div> <div class="storehauled"> <p> Storehauled <br /> On Roblox: <a class="robloxgame" href="https://www.roblox.com/games/6258825725"> Roblox Game </a> <br /> Released: 1/18/2021 <br /> <br /> Current status: Remaking [in Beta] <br /> <br /> Progress: <br /> UI - Completed <br /> Map - Mostly completed [70%] <br /> Users: Brony#0445 Babushka_OP#6118 <br /> Trello board: <a class="trello" href="https://trello.com/b/WzuH9IK3"> Trello of the Game</a > <br /> Early access release: Late Q4 2021 - Beta is the last part of closed development. We'll let you know when you can access the game freely. <br /> <br /> Teasers of the game: <br /> <br /> The park is the most chilling place in here... <br /> <br /> <img src="teaser1.png" /> </p> </div> </body> 我找不到办法做到这一点，我一直在破坏它只需将 img 标签放入 [nchor] 标签中即可 <a class="navbar-brand" href="index.html"><img src="<your picture>" alt="<your alt text>"></a> 确保您的导航栏品牌类别合适，否则您可能需要添加另一个类别来按照您想要的方式设计您的 img。

html navbar

回答 1 投票 0

我无法弄清楚如何将两个导航栏元素放在 bootstrap 5 的末尾

所以问题是我试图将两个导航栏元素放在 bootstrap 5 中导航栏的末尾，但它不起作用这是我的代码：所以问题是我试图将两个导航栏元素放在 bootstrap 5 中导航栏的末尾，但它不起作用这是我的代码： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Hello, world!</title> </head> <body> <nav class="navbar navbar-dark bg-dark navbar-expand-sm"> <a class="navbar-brand" href="">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarPractice" aria-controls="navbarPractice" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarPractice"> <div class="navbar-nav"> <a class="nav-link active" aria-current="page" href="">Home</a> <a class="nav-link" href="">About</a> <a class="nav-link" href="">Support</a> <a class="nav-link" href="">Log In</a> <a class="nav-link" href="">Sign Up</a> </div> </div> </nav> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> </body> </html> 我尝试过使用 ms-auto 将 div 封装在登录和注册元素周围，但这不起作用。我也尝试过浮动和文本，但也不起作用添加这个CSS，该区域是一个flex，justify-content将控制其对齐方式。 .navbar-nav { justify-content: right; width: 100% }

html navbar bootstrap-5

回答 1 投票 0

如何在导航栏中将元素居中

我在页面中将导航栏的元素居中时遇到问题，该项目位于 dic_cafe 文件夹中，我认为这与 CSS 文件相关，但我找不到错误，请帮助我

html css navbar

回答 1 投票 0

为什么在较小的屏幕上，我的嵌套菜单不起作用？

在较小的屏幕上，我希望下拉菜单和嵌套菜单仅在单击时出现。即你点击苹果，就会出现红苹果和青苹果，如果你点击红苹果，就会出现美味。呃...

javascript css drop-down-menu navbar nested-lists

回答 1 投票 0

下拉菜单响应式

我正在尝试构建一个具有完整宽度和高度的响应式下拉菜单。问题是，每当我以较小的宽度打开菜单然后展开屏幕时，我原来的导航栏就会......