IJava脚本无法正常工作/链接正常

IJavaScript not working/linking properly

本文关键字：工作 链接 常工作 脚本 IJava      更新时间：2023-09-26

我最近开始学习HTML，CSS和Javascript，我仍然掌握了它的窍门。

我希望在单击div 类 （mainLeft） 时显示隐藏菜单（菜单）。 但是，我的JavaScript查询来隐藏/显示它不起作用。

网页代码 

<head>
  <link type="text/css" rel="stylesheet" href="satmap.css" />
 <script type="text/javascript" src="C:'Users'mbashir'Documents'HTML'satmap.js"></script>
<title>SATMAP Home</title>
</head>
 <body>
    <div id="main">
    <h1> XYZ</h1>
    </div>
  <div id="mainLeft">
    <h1> Current Stats </h1>
  </div>
  <div id="SME">
    <h4> my Explorer </h4>
  </div>
  <div id="DataAnalysis">
    <h4> Data Analysis </h4>
  </div>
  <div id="ProdMonitor">
    <h4> Production Monitoring </h4>
  </div>
    <div class="menu">
  <div class="icon-close">
    <h4> Disappear </h4>
  </div>
  <ul>
    <li><a href="#">Gain Table</a></li>
    <li><a href="#"> Remember Me</a></li>
    </ul>
</div>
</body>

CSS代码

 body {
  background-color: white;
}
h1{
font-size: 30px;
  color: white;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-family: Candara; 
}
h4{
font-size: 30px;
  color: white;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  font-family: Candara; 
}
#main {
  display: table;
  height: 50px;
  width: 600px;
  margin-left: auto;
  margin-right: auto;
  background-color: #13b5ea;
}
#SME {
  display: table;
  position: absolute;
  width: 250px;
  height: 250px;
  left: 50%;
  top: 50%;
  margin-left: -125px;
  margin-top: -125px;
  background-color:#13b5ea;
}
#DataAnalysis {
  display: table;
  position: absolute;
  width: 200px;
  height: 200px;
  left: 38.3%;
  top: 28%;
  margin-left: -100px;
  margin-top: -100px;
  background-color:#13b5ea;
}
#ProdMonitor {
  display: table;
  background-color:#13b5ea;
  position: absolute;
  width: 200px;
  height: 200px;
  left: 38.3%;
  top: 72%;
  margin-left: -100px;
  margin-top: -100px;
   }
#mainLeft {
  display: table;
  height: 50px;
  width: 600px;
  margin-right: auto;
  background-color: #13b5ea;
  cursor: pointer;
}
    .menu {
  background-color:#13b5ea;
  left: -285px;  
  height: 100%;
  position: fixed;
  width: 285px;
}
  .menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}
.menu a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
}
.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-top: 10px;
}

Javascript Code

var main = function(){
  $('#mainLeft').click(function(){
      $('.menu').animate({
          left:'0px'
     },200);
    $('body').animate({
      left: '285px'
    }, 200);
   });
};

$(document).ready(main);

你验证过你的javascript是否正在触发？比如加console.log('test')或alert('test')？如果它正在燃烧，那么您可以继续查看其他内容。

我认为您的问题可能是因为您正在对一个没有任何意义的left值进行动画处理，因为尚未为元素提供使用它的 CSS position值。尝试给#mainLeft元素一个position: absolute，看看会发生什么。

您说过JS文件与页面位于同一文件夹中，因此您可以像以下方式链接它：

<script src="satmap.js"></script>

还要注意的是，在提供的HTML中，您没有包含JQuery库，并且由于您使用的编码依赖于JQuery，这将是一个问题！ :)
您可以从 JQuery.com 下载 JQuery 库，或链接到 CDN 主机，如下所示：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
相关文章：