Question

我正在尝试创建一个按钮，当单击菜单栏中的锚点时，div会显示在页面前面。问题是我在html文件中有javascript并且我想将它放在外部文件中，所以我可以在不同的页面中重复使用它，因为当你单击锚点时这个表单必须出现在每个页面上。 / p>

input[type=text], input[type=password] {
    width: 100%;

    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.close {
    position: absolute;
    right: 35px;
    top: 15px;
    color: #000;
    font-size: 40px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.5);
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto;
    border: 1px solid #888;
    width: 80%;
}

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

  <title>Near-reality craft</title>

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>

</head>

<body>

  <div id="hormenu">
    <a href="#" class="hormenu_item">Home</a>
    <a href="#" class="hormenu_item" id="registerButton">Registeren</a>
    <a href="#" class="hormenu_item">features</a>
    <a href="#" class="hormenu_item">Contact</a>

  </div>

  <!-- Het veld (Het registratieveld) -->
  <div id="registerModal" class="modal">
    <span onclick="document.getElementById('registerModal').style.display='none'" class="close" title="Close Modal">&times;</span>
    <form class="modal-content animate" action="/action_page.php">
      <div class="container">
        <label><b>Email</b></label>
        <input type="text" placeholder="Enter Email" name="email" required>

        <label><b>Password</b></label>
        <input type="password" placeholder="Enter Password" name="psw" required>

        <label><b>Repeat Password</b></label>
        <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
        <input type="checkbox" checked="checked"> Remember me
        <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>

        <div class="clearfix">
          <button type="button" onclick="document.getElementById('registerModal').style.display='none'" class="cancelbtn">Cancel</button>
          <button type="submit" class="signupbtn">Sign Up</button>
        </div>
      </div>
    </form>

  </div>

  <script>
    $("#registerButton").click(function() {
      $("#registerModal").toggle();
    })
  </script>
  
  <div id="informatie">
    <h1>Welkom!</h1>
    <p>test</p>
  </div>


  </div>

</body>

</html>

你能帮帮我吗？

Answer 1

只需将脚本代码复制粘贴到外部js文件中即可。

但是将代码包装在$(document).ready(function(){..});中，如下所示： -

$(document).ready(function(){
  $("#registerButton").click(function() {
     $("#registerModal").toggle();
  });
});

现在在你的html文件中添加如下文件： -

<script type="text/javascript" src="your external js file path"></script>

您可以在<head>部分或页面底部调用它。

注意： - 确保在此外部js文件之前添加 jQuery库。 否则您将获得

$ not defined error

Answer 2

创建一个脚本文件并以某种方式命名。

将此文件保存在某处 - 我建议在“脚本”文件夹中。然后，您可以将其包含在HTML中：

<script src="/Path/To/Script/script.js"></script>

内容如下：

function toggleItem(item){
  $(item).toggle();
};

您的HTML更改为以下内容：

<button onclick="toggleItem('#IdOfDiv'); return false;">Hide given div</button>

Answer 3

requirejs

RequireJS是一个JavaScript文件和模块加载器。它针对浏览器内使用进行了优化，但可以在其他JavaScript环境中使用，例如Rhino和Node。使用像RequireJS这样的模块化脚本加载器可以提高代码的速度和质量。

愿这有帮助吗？

我怎么能把它放在外部的JavaScript文件中

3 个答案: