尝试在导航栏中突出显示当前页面

Trying to highlight current page in Navigation Bar

提问人：Ryan Doe 提问时间：10/14/2023 最后编辑：Ryan Doe 更新时间：10/16/2023 访问量：45

问：

我正在尝试突出显示导航栏部分，但我找到的文章不起作用。

我想做的是在更改页面时突出显示我所在的导航栏部分，例如，在索引.html（主页）上时，突出显示主页，然后转到news.html（新闻），突出显示新闻。

我搜索了文章，我找到的文章对我不起作用。

这是我的html代码：

    <nav>
            </div>
        </label>
        <script src="nav.js"></script>
        <label class="logo"><a href="index.html">JR-Koders</a></label>
        <ul>
            <li><a href="index.html" class="active text">Home</a></li>
            <li><a href="nav.html" class="text">News</a></li>
            <li><a href="j-koders.html" class="text">J-Koder</a></li>
            <li><a href="r-koder.html" class="text">R-Koder</a></li>
            <li><a href="koders.html" class="text">Koders</a></li>
            <li><a href="search.html"><i class="fa fa-search text"></i></a></li>
        </ul>
    </nav>



    <script type="text/javascript">

        // Hamburger
        var menu = document.getElementById("hamburger");
    
    
        menu.onclick = function(){
            menu.classList.toggle("openhamburger");
        }

        // End of this section

    </script>

这是我的css代码：

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

body{
    font-family: arial;
}

nav{

    background: black;
    color: #20C20E;
    height: 80px;
    width: 100%;
}

.text{
    color: #20C20E;
}
label.logo{
    color: white;
    font-size: 35px;
    line-height: 80px;
    padding: 0 100px;
    font-weight: bold;
}

nav ul{
    float: right;
    margin-right: 20px;
}


.our-logo{
    width: 70px;
}


a { color: inherit; } 

nav ul li{
    display: inline-block;
    line-height: 80px;
    margin: 0 5px;
}

nav ul li a{
    color: white;
    font-size: 17px;
    text-transform: uppercase;
    padding: 7px 13px;
    border-radius: 3px;
}

a.active,a:hover{
    background: #1b9bff;
    transition: .5s;
}

label.a:hover {
    background: #1b9bff;
    transition: 3s;
}

我也有我的导航栏响应式代码，但我没有把它包含在这里，但我希望它能正常工作

HTML CSS 导航 高亮显示 当前页面

评论

0赞 ralph.m 10/14/2023
有很多方法可以做到这一点——要么只用CSS，要么用PHP之类的东西。你还没有说明你尝试了什么，或者你更喜欢哪种方法。
0赞 Oskar Grosser 10/14/2023
：local-link 选择器呢？

答：

0赞 Suramuthu R 10/14/2023 #1

我在您的代码中看不到任何 ID 为“hamburger”和 css 类为“openhamburger”的 html 元素。

要突出显示的部分应指定 ID 名称“hamburger”，或提供 ID 为“hamburger”的元素。（正如您在代码的 javascript 部分中提到的 menu = document.getElementById（“hamburger”））

你想如何突出显示应该用 css 编写，类名为“openhamburger”（因为你在 javascript 代码中提到了 menu.classList.toggle（“openhamburger”））。我假设您想在单击汉堡图标时突出显示导航栏

例如： HTML格式：

<div onclick = "highlightNavbar()">☰</div>

<nav id= "hamburger" >
<!--some html code-->
</nav>

CSS：

/* Style in such a way you want to highlight navbar */
.openhamburger{
position:relative;
top: 30px;
color: deeppink
background-color:grey;
}

Javascript的：

<script>
function highlightNavbar(){
var menu = document.getElementById("hamburger")
menu.classList.toggle("openhamburger");
    }
</script>

上面的代码是根据 javascript 中给出的 Id 名称和类名。

0赞 Par Tha 10/14/2023 #2

试试这个：

let els = document.querySelectorAll('li > a');
els.forEach(el => {
  el.addEventListener('click', e => {
    els.forEach(a => a.closest('li a').classList.remove('active'));
    e.target.closest('li a').classList.add('active');
  })
})
*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

body{
    font-family: arial;
}

nav{

    background: black;
    color: #20C20E;
    height: 80px;
    width: 100%;
}

.text{
    color: #20C20E;
}
label.logo{
    color: white;
    font-size: 35px;
    line-height: 80px;
    padding: 0 100px;
    font-weight: bold;
}

nav ul{
    float: right;
    margin-right: 20px;
}


.our-logo{
    width: 70px;
}


a { color: inherit; } 

nav ul li{
    display: inline-block;
    line-height: 80px;
    margin: 0 5px;
}

nav ul li a{
    color: white;
    font-size: 17px;
    text-transform: uppercase;
    padding: 7px 13px;
    border-radius: 3px;
}

a.active,a:hover{
    background: #1b9bff;
    transition: .5s;
}

label.a:hover {
    background: #1b9bff;
    transition: 3s;
}
    <nav>
        <script src="nav.js"></script>
        <label class="logo"><a href="index.html">JR-Koders</a></label>
        <ul>
            <li><a href="#" class="text active">Home</a></li>
            <li><a href="#" class="text">News</a></li>
            <li><a href="#" class="text">J-Koder</a></li>
            <li><a href="#" class="text">R-Koder</a></li>
            <li><a href="#" class="text">Koders</a></li>
            <li><a href="#"><i class="fa fa-search text"></i></a></li>
        </ul>
    </nav>

评论

0赞 Ryan Doe 10/15/2023
嗨，它工作得很好，但它仅适用于 # 链接。有没有办法在更改页面时使其工作（例如：index.html 到 example.html）？

上一个：如何突出显示数据框中的特定行？

下一个：具有响应式文本的标题应在每行新行中具有背景