Question

我遇到了JQuery的问题。问题是我希望（div）header的高度为margin-top的{{1}}，其类别为＆＃34;内容＆＃34;，否则，div出现在标题下。

这里有代码：

部分HTML

div

CSS的一部分

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

我只是把有用的东西。

你有 HTML 中的JS。提前谢谢。

Answer 1

变量不能是数字，所以这里是固定代码..

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

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

Answer 3

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

请参阅此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>

遇到JQuery问题

3 个答案: