时间戳

首页 > 解决方案 > Bulma：如何在导航栏中很好地标记我所在网站的当前标签？

html - Bulma：如何在导航栏中很好地标记我所在网站的当前标签？

问题描述

我想在导航栏中使用 Bulma 很好地标记我在网站上的当前选项卡。

在此处输入图像描述

我试过is-tab，is-active但aria-current="page"没有用。它像这样呈现，当前选项卡“关于我”没有以任何方式标记。

假设代码片段如下所示：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<nav class="navbar navbar-color is-fixed-top" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
        <a class="navbar-item">
            <img src="static/Gimilov.png" width="130" height="50" />
        </a>

        <a class="navbar-burger" id="burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample" role="button">
            <span></span>
            <span></span>
            <span></span>
        </a>
    </div>

    <div class="navbar-menu" id="nav-links" id="navbarBasicExample">
        <div class="navbar-start">
            <a class="navbar-item has-text-white" href="/">
                About me
            </a>

            <a class="navbar-item has-text-white" href="/projects">
                Projects
            </a>

            <a class="navbar-item has-text-white" href="/resume">
                Resume and certifications
            </a>

            <a class="navbar-item has-text-white" href="/recommendations">
                Recommendations
            </a>

            <div class="navbar-item has-dropdown is-hoverable">
                <a class="navbar-link has-text-white">
                    More
                </a>

                <div class="navbar-dropdown">
                    <a class="navbar-item" href="/experience">
                        Experience
                    </a>
                    <hr class="navbar-divider" />
                    <a class="navbar-item" href="/whygimilov">
                        Why Gimilov?
                    </a>
                </div>
            </div>
        </div>
    </div>
</nav>

标签： htmlcssbulma

解决方案

欢迎。

如果查看https://bulma.io/videos/的代码，可以看到菜单按钮如下所示：

<a class="navbar-item bd-navbar-item bd-navbar-item-videos bd-navbar-item-base is-active" href="https://bulma.io/videos/">
    <span class="icon has-text-success">
        <i class="fas fa-play-circle"></i>
    </span>
    <span>Videos</span>
</a>

添加边框的是.bd-navbar-item.is-activeCSS。添加is-active到锚类可能足以让您的页面正常工作。

推荐阅读