使用 <button> 而不是 <a>答案

【问题标题】：Using <button> instead of <a>使用 <button> 而不是 <a>
【发布时间】：2020-08-22 05:02:59
【问题描述】：

我正在使用 ReactJS 和一个 Bootstrap 导航栏。 Bootstrap 使用<a> 标记作为导航按钮。我希望按钮能够在不使用 href 的情况下向下滚动到页面上的不同组件。我有一个 scrollFunction 可以根据按下的内容滚动到某个部分。如果我使用<a> 标记并将其更改为按钮类型，则格式完全不同，当我将鼠标悬停在按钮上时，我会丢失“活动”页面样式以及指针。

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Education <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

如果我将 Education <a> 标签更改为：

<button class="nav-link" type="button" onClick={()=>scrollFunc("education")} style={{background:"transparent", border:"none"}}>Education</button>

然后我会得到这个输出。

最后，如果我将 Education 更改为：

<a class="nav-link" type="button" onClick={()=>scrollFunc("education")} style={{background:"transparent", border:"none"}}>Education <span class="sr-only">(current)</span></a>

我会得到这个输出：

我想得到第一张图片的输出，不带href。此外，当我将鼠标悬停在上方时，我希望鼠标图标成为如下所示的指针：

请帮我做这件事，我对 Web 开发比较陌生。

【问题讨论】：

对于鼠标部分，请尝试将“光标：指针”添加到 css。（要添加到 html，请执行 style="cursor:pointer"）
这正是我想要的！谢谢！！

标签： javascript html css reactjs bootstrap-4

【解决方案1】：

感谢@mega12345mega 的回答：

<a class="nav-link" onClick={()=>scrollFunc("education")} style={{cursor:"pointer"}}>Education <span class="sr-only">(current)</span></a>

【讨论】：