Question

我有这个导航栏但由于某种原因<a>没有更新到新地址的URL。我试着给<a>一个z-index 999;，但仍然没有效果。

它是一个单页网站，因为你看我使用＃来让浏览器跳到正确的位置。

不，我没有.htaccess文件，你看到的代码就是我所拥有的

HTML

<nav class="navbar col-md-12">
    <div class="container">
        <div class="logo">
            <div class="fa-microphone"></div><label>Bit-meeting</label>
        </div>

        <ul class="hidden-xs desktop-menu">
            <li>
                <a href="#Forside">Forside</a>
            </li>

            <li>
                <a href="#Om">Om</a>
            </li>

            <li>
                <a href="#Plan">Plan</a>
            </li>

            <li>
                <a href="#Talere">Talere</a>
            </li>

            <li>
                <a href="#Billetter">Billetter</a>
            </li>

            <li>
                <a href="#Blog">blog</a>
            </li>

            <li>
                <a class="btn btn-border" href="#Kontakt">Kontakt</a>
            </li>
        </ul>
    </div>
</nav>

SCSS

.navbar {
    height: $navbar;
    width: 100%;
    position: fixed;
    border-bottom: 2px solid $red;
    z-index: 19;
    background-color: white;

    margin: 0px;
    padding: 0px 15px;

    .logo {
        margin-left: 15px;
        display: flex;
        line-height: $navbar;
        text-indent: 5px;
        font-size: 1.2rem;
        font-weight: bold;
        text-transform: capitalize;
        position: absolute;
        div {
            text-indent: 0px;
            color: black;
            font-family: FontAwesome;
            background-color: #ED1C24;
            width: 60px;
            height: 60px;
            font-size: 2rem;
            text-align: center;
            line-height: 60px;
            border-radius: 50%;
            margin-top: 10px;
        }
    }

    .desktop-menu {
        float: right;

        li {
            list-style-type: none;
            display: inline-flex;

            a {
                padding: 0px 10px;
                line-height: $navbar;
                text-decoration: none;
                color: black;
                height: $navbar;
                cursor: pointer;
                display: block;

                &:hover {
                    background-color: $red;
                    color: white;
                }
            }

            .btn {
                line-height: 38px;
                height: 40px;
            }

        }
    }
}

更新

标签根本不起作用，甚至在导航之外。 （不，我没有更多的风格，你可以看到ul，li和a）

Answer 1

如果您想使用锚点更改showen URL，则必须使用javascript。

例如：

JS：

function changeURL(key){
    history.replaceState({}, "", key);
}

你的链接：

<a href="#Forside" onClick="changeURL(this.href)">Forside</a>

为什么这个标签不起作用？

1 个答案: