JavaScript似乎没有激活HTML元素

我试图让我的HTML正文左移，当我点击菜单标志，但似乎并没有通过jQuery工作......我玩过脚本'在页面顶部的位置，这似乎不是问题。JavaScript似乎没有激活HTML元素

这是我的HTML：

<!doctype html> 
<html> 
<head> 
     <meta charset="utf-8"> 
     <title>final project</title> 

<link rel="stylesheet" type="text/css" href="css/final-fix.css"> 
<!--jquery--> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  
<!--bootstrap--> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 

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

</head> 

<body> 
    <div class="container-box"> 
     <nav> 
      <ul class="nav nav-pills pull-right"> 
       <li role="navigation"><a href="#">Home</a></li> 
       <li role="navigation"><a href="#">About Us</a></li> 
       <li role="navigation"><a href="#">Contact Us</a></li> 
      </ul> 
      <ul ul class="nav nav-pills pull-left"> 
       <li role="menu"><a href="#"><span class="glyphicon glyphicon-menu-hamburger"></span></li> 
      </ul> 
     </nav> 

     <header></header> 

       <div class="main" id="grad"><h1>Welcome to ducati</h1> 

      <div class="cover-div"> 

       <div class="box" id="box1"> 
       <span class="glyphicon glyphicon-headphones"></span> 
       <p>Lorem ipsum </p> 
       </div> 

       <div class="box" id="box2"> 
       <span class="glyphicon glyphicon-music"></span> 
       <p>Lorem ipsum </p> 
       </div> 
       <div class="box" id="box3"> 
       <span class="glyphicon glyphicon-download-alt"></span> 
       <p>Lorem ipsum </p> 
       </div> 
       <div class=" box" id="box4"> 
       <span class="glyphicon glyphicon-shopping-cart"></span> 
       <p>Lorem ipsum </p> 
       </div> 
      </div> 

     </div> 

     <footer> &copy; All right belong to me :) </footer> 
    </div> 
</body> 
</html>

这是我的CSS：

* { 
    margin: 0; 
    padding: 0; 
    font-family: arial; 
} 
.container-box{ 
position:relative; 
     margin: 0 auto; 
     width:600px; 
     height:570px; 
     border:2px solid black; 
} 
.pull-right { 
    /* font-weight:bold; */ 

} 
header { 

    background-image: url('http://dre.ducati.it/wp-content/uploads/2015/02/Home_Multi-720x404.jpg'); 
    height:30%; 
    width:100%; 
    background-position: center center; 

} 
.main h1{ 
    text-align:center; 
    margin:auto; 
} 
.main span{ 
    text-align:center; 
    font-size:30px; 
    margin-top:10px; 
} 
.main{ 
    position: relative; 
    height: 60%; 
    border-bottom:2px solid black; 
    text-align:center; 
} 
#grad { 
    background: -webkit-linear-gradient(left top, gray,gray,red,gray,white); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(bottom right, gray,gray,red,gray,white); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(bottom right, gray,gray,red,gray,white); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(to bottom right, gray,gray,red,gray,white); /* Standard syntax */ 
} 


footer { 
    background-color:gray; 


} 
.box{ 

    width: 20%; 
    border: 1px solid black; 
    margin:2.5%; 
    height: 50%; 
    border-radius:15px; 
    color:purple; 
    font-weight:bold; 
} 
.cover-div{ 

    width:100%; 
    margin:0 auto; 

} 

#box1{ 
float:right; 
/* margin-left:170px; */ 
background-image:linear-gradient(
     rgba(0, 0, 0, 0.1), 
     rgba(0, 0, 0, 0.1) 
    ),url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTB2YZ8vH8ya8CmAfxdelGL1Yg2H9wnubKmiMjTfa_-oUyWMBJrsg'); 
} 

#box2{ 
float:right; 
background-image:url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRHQ6KOrPE0qzNJXGClg03lWQ_N1mArKThc4oL2Cj9F06RaKHqajg'); 
} 
#box3{ 
float:right; 
background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwFGxPLtrhbS_a3m_Vvc8I-M27rdh9fkIdXULQYSEGwuazc4ey'); 
} 
#box4{ 
float:right; 
background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpOLpDTHGt7NHyuUtsc3Zrpb5JuV4G6vmIEQKD0VO9Nrot-MS46w'); 
} 

.glyphicon{ 
color: red; 
}

这是我的JavaScript：

var main = function() { 

    $('.glyphicon-menu-hamburger').click(function() { 
     $('.container-box').animate({ 
      left: "285px" 
     }, 200); 
    }); 


    $(document).ready(main); 
};

来源

2015-05-25 omer

你在Javascript的最后有一个额外的'};'。 – Barmar

你确定点击处理程序实际执行没有错误吗？（检查你的浏览器的控制台）。正如@Barmar所说，你问题中的JS被打破了。 –

哦，这不是额外的。调用'$（document）.ready（）'在main函数中。所以它永远不会被调用。 – Barmar

在main里面放置注释，你会发现它最不可能被调用。

看起来您正在调用main函数声明中的文档。这意味着它永远不会被调用。

来源

2015-05-25 22:58:31

JavaScript似乎没有激活HTML元素

回答

相关问题