logo标签列表

Bootstrap中没有href的链接

javascriptjqueryhtmltwitter-bootstrap
7
我正在使用Bootstrap制作登录页面，我看到有些人在Bootstrap中使用a标签而不带'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>
2
对于不需要链接的a标签，请使用“href =“＃””。 - Charlie Heflin
将所有jQuery代码包装在$('document').ready(function(){ your code goes here })中是一个好主意。你的点击处理程序可能会附加到尚不存在的某些内容，因此需要告诉jQuery等待文档准备就绪。另外，我不知道是否需要，在锚点上看到hrefs，但如果href未使用，则通常为href=#。 - Robbie Milejczak
同意Charlie的意见或将事件传递给处理程序并执行event.preventDefault()。 - Taplar
2
@RobbieMilejczak的脚本位于页面底部，因此文档准备是不必要的。 - Taplar
4
把这段话翻译成中文。 - user184994
显示剩余3条评论
4个回答
9

试试这个：

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

你需要使用带有一些类的<button>元素。

<button class="btn btn-link p-0">Button</button>
1
你可能需要一个 href 属性，大多数浏览器的默认样式设置是将没有 href 的 a 标签显示为纯文本。 

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

1
打破 Vue 路由器。 - yspreen
破坏了 Angular 路由器！ - Anh-Thi DINH
是的，这种方法（以及类似的javascript:void(0)方法）会破坏几乎所有框架的路由，因为它们都有自己处理链接和路由的特殊方式。但所有这些框架都已经有了被样式化为链接的按钮/文本或者不指向任何地方的链接，如果缺少这些，也可以很容易地添加。如果你需要像React/Vue/Angular等框架中的类似功能，你应该可以通过谷歌搜索轻松找到你要找的答案。 - Ozan
0

you can just use the a tag without href like this: <a id="showLogInForm">Log In</a> please refer to the code below for details: 

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

我刚刚尝试使用; <a href="javascript:void(0)" id="showLogInForm">登录</a>但它仍然没有调用此警报 <script type="text/javascript"> $("#showLogInForm").click(function(){ alert("嗨！"); }); </script> - oversoon
检查一下答案，现在它应该可以工作了。我认为你的代码中链接的外部文件存在问题，请将它们包含在头文件中并检查路径是否正确。 - vikrant
2
请提供一些信息。不要仅回复代码。 - robsch
因为没有解释而被踩，所以不太有用，必须逐行查看更改才能明白。 - HazardousGlitch
这就是提问者寻找的答案。进一步验证这个答案的事实是，我刚刚深入研究了USPS“预定取件”网页代码，并发现它使用了几乎相同的代码来处理页面上的按钮。 - Madison Knight
显示剩余2条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接