JQuery出现问题

我遇到了JQuery问题。问题是，我想要一个（div）header的高度为div其div它的类是“content”，否则，div会出现在标题下。JQuery出现问题

在这里你的代码：在HTML

<head> 
    /*whatever it's inside*/ 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
    <script type="text/javascript" src="script.js"></script> 
</head> 
<script> 
    $(document).ready(function(){ 
     var 1 = $(".header").height() + "px"); 
     $(".content").css ('margin-top', 1); 
    }); 
    </script> 
<body> 

    <div class="header"> 

     <div class="container"> 
      <div class="logo"> 
       <h1><a href="#">Web</a></h1> 
      </div> 

      <div class="nav"> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </div> 
      </div> 
     </div> 
     <div class="container"> 

     <div class="content"> 


    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. 
</p> 
</div> 
</div> 
</body> 
</html>

CSS的部分

body { 
    width: 100%; 
    margin: auto; 
} 

.container { 
    width: 70%; 
    margin: 0 auto; 
} 

.header { 
    background: #6396bc; 
    width: 100%; 
    top: 0; 
    position: fixed; 
} 
.content { 
    margin-top: 200px; 
}

我只是把什么是有用的

部分。

您在HTML中有JS。在此先感谢。

来源

2017-04-12 Luis M.

'VAR 1 ='的数不能是一个变量[可变在JS名称]（HTTP ：//stackoverflow.com/questions/1661197/what-characters-are-valid-for-javascript-可变名）。 '$（“。header”）。height（）+“px”）'最后一个'）'是语法错误。 – GillesC

尝试简单的'$（“。content”）。css（'margin-top'，$（“。header”）。height（））;' – GillesC

也许问题在于javascript var 1不正确。有关详细信息，请参阅http://stackoverflow.com/questions/342152/why-cant-variable-names-start-with-numbers，但basiclly不是数字开始变量。 – Roy

变量不能是数字那么这里是固定的代码..

$(document).ready(function(){ 
 
     var x = $(".header").height(); 
 
     $(".content").css ('margin-top', x); 
 
    });

body { 
 
    width: 100%; 
 
    margin: auto; 
 
} 
 

 
.container { 
 
    width: 70%; 
 
    margin: 0 auto; 
 
} 
 

 
.header { 
 
    background: #6396bc; 
 
    width: 100%; 
 
    top: 0; 
 
    position: fixed; 
 
} 
 
.content { 
 
    margin-top: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header"> 
 

 
     <div class="container"> 
 
      <div class="logo"> 
 
       <h1><a href="#">Web</a></h1> 
 
      </div> 
 

 
      <div class="nav"> 
 
       <ul> 
 
        <li><a href="#">Home</a></li> 
 
        <li><a href="#">Contact</a></li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="container"> 
 

 
     <div class="content"> 
 

 

 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. 
 
</p> 
 
</div> 
 
</div>

来源

2017-04-12 10:44:59

谢谢Sahil Dhir，它工作完美。 –

欢迎您:) –

变量名称必须以字母开头或下划线或美元符号。

请参阅本https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variables

一个JavaScript标识符必须以字母开头，下划线（_），或美元符号（$）;后续字符也可以是数字（0-9）。由于JavaScript区分大小写，所以字母包括字符“A”到“Z”（大写）以及字符“a”到“z” （小写）。

请尝试此代码

$(document).ready(function(){ 
 
     var one = $(".header").height() + "px"; 
 
     $(".content").css ('margin-top', one); 
 
    });

body { 
 
    width: 100%; 
 
    margin: auto; 
 
} 
 

 
.container { 
 
    width: 70%; 
 
    margin: 0 auto; 
 
} 
 

 
.header { 
 
    background: #6396bc; 
 
    width: 100%; 
 
    top: 0; 
 
    position: fixed; 
 
} 
 
.content { 
 
    margin-top: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header"> 
 

 
     <div class="container"> 
 
      <div class="logo"> 
 
       <h1><a href="#">Web</a></h1> 
 
      </div> 
 

 
      <div class="nav"> 
 
       <ul> 
 
        <li><a href="#">Home</a></li> 
 
        <li><a href="#">Contact</a></li> 
 
       </ul> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="container"> 
 

 
     <div class="content"> 
 

 

 
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. 
 
</p> 
 
</div> 
 
</div>

来源

2017-04-12 10:46:11 vijay

$(document).ready(function(){ 
 
     var l = $(".header").height() + "px"; 
 
    $(".content").css ('margin-top', l); 
 
    });

 body { 
 
      width: 100%; 
 
      margin: auto; 
 
     } 
 

 
     .container { 
 
      width: 70%; 
 
      margin: 0 auto; 
 
     } 
 

 
     .header { 
 
      background: #6396bc; 
 
      width: 100%; 
 
      top: 0; 
 
      position: fixed; 
 
     } 
 
     .content { 
 
      margin-top: 200px; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header"> 
 

 
    <div class="container"> 
 
     <div class="logo"> 
 
      <h1><a href="#">Web</a></h1> 
 
     </div> 
 

 
     <div class="nav"> 
 
      <ul> 
 
       <li><a href="#">Home</a></li> 
 
       <li><a href="#">Contact</a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 

 
    <div class="content"> 
 

 

 
     <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. 
 
     </p> 
 
    </div> 
 
</div>

来源

2017-04-12 10:48:42 Bragadeeswaran

JQuery出现问题

回答

相关问题