javascript/jquery不适用于我的html_Javascript

javascript/jquery不适用于我的html

javascript

javascript/jquery不适用于我的html,javascript,Javascript,我不知道怎么做，但是当我运行javascript的时候，它就不工作了。我用的是chrome和Firefox，当我调试它的时候，什么都没有出现。如果可以的话，请帮助我。。此外，当我将添加到我的代码时，导航和标题也会消失这是我的html <html> <head> <title>final project</title> <link rel="stylesheet" type="text/css" href="css/f

我不知道怎么做，但是当我运行javascript的时候，它就不工作了。我用的是chrome和Firefox，当我调试它的时候，什么都没有出现。如果可以的话，请帮助我。。此外，当我将

添加到我的代码时，导航和标题也会消失

这是我的html

<html>
<head>
        <title>final project</title>


<link rel="stylesheet" type="text/css" href="css/final.css">

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

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

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
</head>
<body>
    <div class="wrep">
        <nav>

        <ul  class="nav nav-pills pull-right">
            <li role="navigation" class="active"><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  class="nav nav-pills pull-left">
            <li role="menu" class="omer"><a href="#">omer</a></li>
            </ul>
            <div class="icon-menu">
            <span class="glyphicon glyphicon-list"><text>Menu<text></span>
            </div>  
        </div>
    </nav>
    <header></header>
    <div class="main" id="grad"><h1>Welcome to ducati</h1>
        <div class="row">
            <div class="col-md-2 box"  id="box1">
            <span class="glyphicon glyphicon-headphones"></span>
            <p>Lorem ipsum</p>
            </div>
            <div class="col-md-2 box"  id="box2">
            <span class="glyphicon glyphicon-music"></span>
            <p>Lorem ipsum</p>
            </div>
            <div class="col-md-2 box"  id="box3">
            <span class="glyphicon glyphicon-download-alt"></span>
            <p>Lorem ipsum</p>
            </div>
            <div class="col-md-2 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>

<script src="js/final.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>        


</body>
</html>

这是我的css

    * {
    margin: 0;
    padding: 0;
    font-family: arial;
}



.wrap {
    width: 1000px;
    margin: 0 auto;

}



header {
    background-image: url('http://dre.ducati.it/wp-content/uploads/2015/02/Home_Multi-720x404.jpg');
    height: 55%;
    background-repeat:no-repeat;
    background-size:100%;
    background-position: center center;
    border-top:2px solid black;  

}

.icon-menu {
    color: #fff;
    cursor: pointer;
    font-family: arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
    float:left;
    position:relative;


  }
.icon-menu:hover{
    background:#E3E3FF;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    box-sizing: border-box;
    height:40px;
    width:100px;

}

.icon-menu span{
  margin-left: 10px;
  margin-top: 8px;
  font-size:20px;
    color: rgb(51, 122, 183);
}
.icon-menu span text{

font-size:20px;
margin-left:4px;


}

.main h1{
    text-align:center;
    margin:auto;
}
.main span{
    text-align:center;
    font-size:30px;
    margin-top:10px;
}
 .main{
    position: relative;
    background: lightgrey;
    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 */
} 

#box1{
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{
background-image:url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRHQ6KOrPE0qzNJXGClg03lWQ_N1mArKThc4oL2Cj9F06RaKHqajg');
}
#box3{
background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwFGxPLtrhbS_a3m_Vvc8I-M27rdh9fkIdXULQYSEGwuazc4ey');
}
#box4{
background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpOLpDTHGt7NHyuUtsc3Zrpb5JuV4G6vmIEQKD0VO9Nrot-MS46w');
}
.glyphicon{
color: red;
}
.col-md-2{
    position: absolute;
    left: 10px;
    top: 10px;
    background: lightbrown;
    width: 20%;
    border: 1px solid black;
    margin:10px;
    height: 50%;
    border-radius:15px;

}

}
footer{
    background: lightgrey;
    margin-top:10px;
    margin-bottom: 20px;
    padding: 20px;

}

此处键入div类名“wrap”


jQuery UI Accordion-默认功能








菜单
欢迎来到杜卡迪
同侧眼睑
同侧眼睑
同侧眼睑
同侧眼睑
&抄袭；好吧，属于我：）
$（文档）.ready（函数（）{
$（'.omer'）。单击（函数（）{
console.log（'here'）；
$（'.wrap'）。设置动画({
左：“285px”
}, 200);
});
});

指向jquery.min.js的链接应位于外部javascript文件之前

    * {
    margin: 0;
    padding: 0;
    font-family: arial;
}



.wrap {
    width: 1000px;
    margin: 0 auto;

}



header {
    background-image: url('http://dre.ducati.it/wp-content/uploads/2015/02/Home_Multi-720x404.jpg');
    height: 55%;
    background-repeat:no-repeat;
    background-size:100%;
    background-position: center center;
    border-top:2px solid black;  

}

.icon-menu {
    color: #fff;
    cursor: pointer;
    font-family: arial, sans-serif;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
    float:left;
    position:relative;


  }
.icon-menu:hover{
    background:#E3E3FF;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    box-sizing: border-box;
    height:40px;
    width:100px;

}

.icon-menu span{
  margin-left: 10px;
  margin-top: 8px;
  font-size:20px;
    color: rgb(51, 122, 183);
}
.icon-menu span text{

font-size:20px;
margin-left:4px;


}

.main h1{
    text-align:center;
    margin:auto;
}
.main span{
    text-align:center;
    font-size:30px;
    margin-top:10px;
}
 .main{
    position: relative;
    background: lightgrey;
    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 */
} 

#box1{
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{
background-image:url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRHQ6KOrPE0qzNJXGClg03lWQ_N1mArKThc4oL2Cj9F06RaKHqajg');
}
#box3{
background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwFGxPLtrhbS_a3m_Vvc8I-M27rdh9fkIdXULQYSEGwuazc4ey');
}
#box4{
background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSpOLpDTHGt7NHyuUtsc3Zrpb5JuV4G6vmIEQKD0VO9Nrot-MS46w');
}
.glyphicon{
color: red;
}
.col-md-2{
    position: absolute;
    left: 10px;
    top: 10px;
    background: lightbrown;
    width: 20%;
    border: 1px solid black;
    margin:10px;
    height: 50%;
    border-radius:15px;

}

}
footer{
    background: lightgrey;
    margin-top:10px;
    margin-bottom: 20px;
    padding: 20px;

}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Accordion - Default functionality</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

</head>

<style>


</style>
<body> 
  <div class="wrap">
    <nav>

      <ul  class="nav nav-pills pull-right">
        <li role="navigation" class="active"><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  class="nav nav-pills pull-left">
        <li role="menu" class="omer"><a href="#">omer</a></li>
      </ul>
      <div class="icon-menu">
        <span class="glyphicon glyphicon-list"><text>Menu<text></span>
        </div>  
      </div>
    </nav>
    <header></header>
    <div class="main" id="grad"><h1>Welcome to ducati</h1>
      <div class="row">
        <div class="col-md-2 box"  id="box1">
          <span class="glyphicon glyphicon-headphones"></span>
          <p>Lorem ipsum</p>
        </div>
        <div class="col-md-2 box"  id="box2">
          <span class="glyphicon glyphicon-music"></span>
          <p>Lorem ipsum</p>
        </div>
        <div class="col-md-2 box"  id="box3">
          <span class="glyphicon glyphicon-download-alt"></span>
          <p>Lorem ipsum</p>
        </div>
        <div class="col-md-2 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>

  <script>
  $(document).ready(function(){

     $('.omer').click(function() {
       console.log('here');
       $('.wrap').animate({
         left: "285px"
       }, 200);
     });
  });

  </script>
</body>
</html>