整套网页头部和底部的内容一样，只切换中间的内容（自己的项目总结）

最新推荐文章于 2023-12-19 10:17:04 发布

原创最新推荐文章于 2023-12-19 10:17:04 发布

· 3.6k 阅读

2 ·

版权

myWork-- 专栏收录该内容

59 篇文章

订阅专栏

本文总结了在网页开发中如何高效利用公共组件，避免重复工作。通过创建可复用的header.html，注释清晰，以及利用遮罩层和弹出框的处理，实现内容区域的灵活切换。同时，介绍了如何在子页面调用父页面元素，以及处理自适应平台的滚动条问题和高度自适应策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做页面的时候，一定先分析好是否需要写一些公共的东西来调用，千万不要做没用工！！！

1，写的时候标注好注释，方便代码多容易乱，无头绪的问题发生。

2，对于遮罩层和弹出框可以写在主页，遮罩层要全部遮住！

3，对于header.html里面的按钮，点击按钮会弹出弹框的问题，可以把弹框写在index.html里面，在header.js里面控制，

eg:

$('.pwd').click(function () {
        $('#editPassMask',window.parent.document).toggle();
        $('#editPassInfo',window.parent.document).toggle();
    })
    $('.help').click(function () {
        $('#helpMask',window.parent.document).toggle();
        $('#helpInfo',window.parent.document).toggle();
    })

4，在子页面调用父页面的东西，加上window.parent.document

5，引入下一个页面的地方，加上target ： <a href="inTheTape.html" target="homePage">

target指向的地方和name的名字一样，这样就替换了和中间的内容。^_^

6，对于自适应的平台网页，要求不能出现滚动条，那么，高度就要求自适应了，但是并不是所有的高度都是按照百分比的形式来做，按钮啊，内部的一些高度就可以使用px，最外层可以这么设置：

$(function () {
    var winH = $(window).height();
    $("body").height(winH * 765 / 765);
    $(".indexMain").height(winH * 765 / 765);//内容
    $(".mainTop").height(winH * 765 / 765);

});

7,如果把弹框写在子页面上，那么遮罩层的问题呢，就是写3个遮罩层进行拼接。

子页面一个遮罩层，父集页面写上下两个遮罩。