引导程序中没有href的'a'链接答案

【问题标题】：'a' link without href in bootstrap引导程序中没有href的'a'链接
【发布时间】：2021-05-09 13:30:23
【问题描述】：

我在登录页面使用引导程序，我看到人们在引导程序中使用没有“href”的标签，但它对我不起作用，有什么想法吗？

我只是在完成之前尝试一个简单的警报自动取款机，当我可以让它工作时，我将在登录和注册页面之间切换链接。目前它只是显示为纯文本。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Secret Diary</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>
  <body>
    <section id="login">
      <div class="container">
        <div class="center">
          <div class="col-md-12 mx-auto">
            <h1>Secret Diary</h1>
            <h2>Store you thoughts</h2>
            <div class="error"><?php echo $error; ?></div>
            <form method="post" id="signupForm">
              <input type="email" class="form-control" name="email" id="email" placeholder="email">
              <input type="password" class="form-control" name="password" id="password" placeholder="password">
              <div class="checkbox">
                <label>
                  <input type="checkbox" name="stayLoggedIn" value="1"> Stay Logged In
                </label>
              </div>
              <input type="hidden" name="signUp" value="1">
              <input type="submit" name="submit" class="btn btn-primary btn-block mb-4" value="Sign Up!">
              <p><a id="showLogInForm">Log In</a></p>
            </form>

            <form method="post" id="loginForm">
              <input type="email" class="form-control" name="email" id="email" placeholder="email">
              <input type="password" class="form-control" name="password" id="password" placeholder="password">
              <div class="checkbox">
                <label>
                  <input type="checkbox" name="stayLoggedIn" value="1"> Stay Logged In
                </label>
              </div>
              <input type="hidden" name="signUp" value="0">
              <input type="submit" name="submit" class="btn btn-primary btn-block mb-4" value="Log in!">
            </form>
          </div>
        </div>
      </div>
    </section>


    <script src="../js/jquery.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>

    <script type="text/javascript">
    $("#showLogInForm").click(function(){
      alert("hi!");
    });
    </script>

  </body>
</html>

【问题讨论】：

将href="#" 用于不应出现在任何地方的标签
最好将所有 jQuery 代码包装在 $('document').ready(function(){ your code goes here }) 您的点击处理程序可能附加到不存在的东西上然而，所以你需要告诉 jquery 等到文档准备好。我也不知道是否需要它，但我总是在锚点上看到 href，但如果未使用 href，通常是 href=#
同意查理或将事件传递给处理程序并执行event.preventDefault()
@RobbieMilejczak 他的脚本位于页面底部，因此无需准备好文档
^ 或使用href="javascript:void(0)"

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

试试这个：

<a href="javascript:void(0)" id="showLogInForm">Log In</a>

【讨论】：

【解决方案2】：

你必须在某些类中使用<button>

<button class="btn btn-link p-0">Button</button>

【讨论】：

【解决方案3】：

您可能需要href 属性，大多数浏览器的默认样式设置为以纯文本形式显示不带href 的a 标签。

<a>some link</a>
<br />
<a href="#">some other link</a>

【讨论】：

破坏 vue 路由器
也破坏了角度路由器！
是的，这个（以及类似的方法，如javascript:void(0)）会破坏几乎所有框架的路由器，因为它们都有自己特殊的方法来处理链接和路由。但是，所有这些要么已经有按钮/文本样式为链接或不路由到任何地方的链接，或者如果它们丢失，可以很容易地添加。如果您需要类似的东西用于 react/vue/angular 等，您应该能够通过谷歌搜索轻松找到您正在寻找的答案。

【解决方案4】：

你可以像这样使用没有 href 的 a 标签： <a id="showLogInForm">Log In</a> 详情请参考以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Secret Diary</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="css/style.css">
</head>
  <body>
    <section id="login">
      <div class="container">
        <div class="center">
          <div class="col-md-12 mx-auto">
            <h1>Secret Diary</h1>
            <h2>Store you thoughts</h2>
            <div class="error"><?php echo $error; ?></div>
            <form method="post" id="signupForm">
              <input type="email" class="form-control" name="email" id="email" placeholder="email">
              <input type="password" class="form-control" name="password" id="password" placeholder="password">
              <div class="checkbox">
                <label>
                  <input type="checkbox" name="stayLoggedIn" value="1"> Stay Logged In
                </label>
              </div>
              <input type="hidden" name="signUp" value="1">
              <input type="submit" name="submit" class="btn btn-primary btn-block mb-4" value="Sign Up!">
              <p><a id="showLogInForm">Log In</a></p>
            </form>

            <form method="post" id="loginForm">
              <input type="email" class="form-control" name="email" id="email" placeholder="email">
              <input type="password" class="form-control" name="password" id="password" placeholder="password">
              <div class="checkbox">
                <label>
                  <input type="checkbox" name="stayLoggedIn" value="1"> Stay Logged In
                </label>
              </div>
              <input type="hidden" name="signUp" value="0">
              <input type="submit" name="submit" class="btn btn-primary btn-block mb-4" value="Log in!">
            </form>
          </div>
        </div>
      </div>
    </section>


    

    <script>
$( document ).ready(function() {
     $("#showLogInForm").click(function(){ alert("hi!"); });
});
</script>

  </body>
</html>

【讨论】：

我刚刚尝试过使用；登录但它仍然没有调用这个警报
检查它现在正在运行的答案，我认为您在代码中链接的外部文件存在一些问题，将它们包含在头部并检查路径是否正确
有一个文件链接错误，但您的代码有效，谢谢
请提供一些信息。不要只回复代码。
这个答案并不是很有用，因为很难确定发生了什么变化。请提供变更说明。