时间戳

首页 > 解决方案 > 导航栏在 activeState 期间不显示 css

javascript - 导航栏在 activeState 期间不显示 css

问题描述

我在 reactJS 中创建了一个导航栏，我希望它在单击相应的选项卡并保持活动状态时保持突出显示的选项卡（通过应用一些样式）。我编写了以下代码，但样式不起作用（已检查样式表是否正确链接，因为它基于 Reactjs 文件结构）。

我从这里参考：https ://codepen.io/k3no/pen/OXgXOb?editors=0110

导航栏.js

import React,{useState} from 'react';
import { Navbar,Container, Nav } from "react-bootstrap";
import {Link, BrowserRouter as Router} from 'react-router-dom';

const NavbarComponent = () => {


return (
    <>
              
            <nav variant='pills' className="navbar navbar-default navbar-static-top">
            <ul  className="nav nav-pills">
                <li >
                <Link activeclassname="active" to="/grocery">Grocery</Link>
                </li>
                <li >
                <Link activeclassname="active" to="/fashion">Fashion</Link>
                </li>
                <li >
                <Link activeclassname="active" to="/beauty">Beauty</Link>
                </li>
                <li >
                <Link activeclassname="active" to="/footwear">Footwear</Link>
                </li>
            </ul>
            </nav>
        
 
    </>
    )
  }

  export default NavbarComponent;

索引.css

nav {
border-bottom: 4px solid black;
text-align: center;
position: relative;
top: 0;
width: 100%;
background: white;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}

nav li {
display: inline-block;
padding-top: 16px;
padding-bottom: 16px;
}

nav a {
text-decoration: none;
color: black;
font-weight: bold;
padding: 16px 32px;
}


.navbar .nav-pills >li >a {
color: black;
}
.navbar .nav-pills > li > a:hover {
 background-color: gold;
 color: black;
}

.navbar .nav-pills .active {
background-color: palevioletred;
color:Black ;
font-weight:bold;
}

我从这里参考：https ://codepen.io/k3no/pen/OXgXOb?editors=0110

我不明白这个错误。

标签： javascripthtmlcssreactjsreact-bootstrap

解决方案

您需要使用NavLinkfrom thereact-router-dom而不是Link然后您将能够使用activeClassName属性

推荐阅读