Question

我正在使用bootstrap作为登录页面，我看到人们在bootstrap中使用没有'href'的标签，但它不适用于我，任何想法？

我只是在完成之前尝试一个简单的警报atm，当我能够正常工作时，我将在登录页面和注册页面之间进行链接切换。目前它只是作为纯文本出现。

<!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>

Answer 1

试试这个：

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

Answer 2

＆＃13;

<!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>

＆＃13;

Answer 3

您可能需要href属性，大多数浏览器＆＃39;默认样式设置为显示a标签而不用href作为纯文本。

＆＃13;

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

＆＃13;

Answer 4

对于偶然发现此问题的任何人，您实际上都可以使用没有值的href属性：
<a href="">link</a>

Answer 5

某些类必须使用<button>

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

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

5 个答案: