javascript - 如何使我的 Bootstrap 按钮看起来像我想要的那样但仍能正常工作？

Question

我的导航栏中有这些 bootstrap 3.x 按钮，我喜欢它们在我执行此操作时的外观:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ul class="nav navbar-nav navbar-right">
            <li><button class="btn btn-sm navbar-link navbar-btn btn-primary"  asp-area="" asp-controller="Account" asp-action="Register">Register</button></li>
            <li><button class="btn btn-sm navbar-link navbar-btn btn-primary"  asp-area="" asp-controller="Account" asp-action="Login">Log in</button></li>
        </ul>

但问题是他们没有像这些那样带我走我需要的路:

丑陋但实用

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ul class="nav navbar-nav navbar-right">
        <li><a class="btn btn-sm navbar-link navbar-btn btn-primary" asp-area="" asp-controller="Account" asp-action="Register">Register</a></li>
        <li><a class="btn btn-sm navbar-link navbar-btn btn-primary" asp-area="" asp-controller="Account" asp-action="Login">Log in</a></li>
    </ul>

我试过将两者包装成一种形式，这有点管用。它看起来符合预期，但它会在打开后提交页面(有效地在我的网页上提交一个空表单)

编辑:我刚刚在 .css 中跑来跑去，让它看起来像我需要的 anchor 。感谢先生的努力。

Answer 1

asp-area、asp-controller 和 asp-action 是 anchor 标签助手，它们不会在按钮标签中产生相同的输出，因为它们专门用于标签。为了使您的按钮以相同的方式工作，您需要添加如下内容:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<ul class="nav navbar-nav navbar-right">
            <li><button class="btn btn-sm navbar-link navbar-btn btn-primary" onclick = "window.open('Account/Register')">Register</button></li>
            <li><button class="btn btn-sm navbar-link navbar-btn btn-primary" onclick="window.open('Account/Login')">Log in</button></li>
        </ul>

或者按照@Jeff Matthews 的建议，您可以添加 javascript，

addEventListener("click", () => {要重定向的代码；});

到按钮元素。 EventListner MDN doc .