Question

当我点击菜单徽标时，我试图让我的HTML主体向左移动，但这似乎不能通过jQuery工作......我玩过脚本＆＃39;页面顶部的位置，似乎不是问题。

这是我的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);
};

Answer 1

在主要内部发表评论，你会发现它最有可能被调用。

看起来你正在为main的声明中调用文档。这意味着永远不会被召唤。

JavaScript似乎没有激活HTML元素

1 个答案: