2017-04-12 14 views
1

JQueryに問題があります。 私は、(div)headerの高さを、そのクラスが "content"であるdivmargin-topとしたいと思います。そうでないと、divがヘッダーの下に表示されるからです。 HTML CSSのJQueryに問題がある

<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> 

パート

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

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

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

私はちょうど便利です何を入れたの

パート:

ここでは、コードを持っています。

あなたはのJSを持っています。 ありがとうございます。

+4

'VAR 1 ='数は、変数[JSの変数名]にはできません。このコードを試してみてくださいHTTP ://stackoverflow.com/questions/1661197/what-c​​haracters-are-valid-for-javascript-変数名)。 '$("。header ")。height()+" px ")'最後の ')'は構文エラーです。 – GillesC

+0

単純に '$("。content ")を試してください。css( 'margin-top'、$(" header ")。height());' – GillesC

+0

javascript var 1が正しくない可能性があります。詳細については、http://stackoverflow.com/questions/342152/why-cant-variable-names-start-with-numbersを参照してください。ただし、基本的に数字で始まるバリエーションはありません。 – Roy

答えて

2

変数ので、ここでは数字にすることはできません固定コード..です名は文字またはアンダースコアやドル記号で始める必要があり

$(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>

+0

サハイルディールありがとう、それは完全に働いた。 –

+1

あなたは歓迎です:) –

0

変数。文字で始まる必要があり、このhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variables

A 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>

2

$(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>

関連する問題