javascript页面加载导致页面颠簸

我有一个页面，它使用Javascript以div的形式在子页面之间切换。问题是，当我在子页面之间单击时，整个页面经常会向上推，并隐藏其中一个导航栏。这在所有浏览器中都会发生

本页的相关部分包括：

<div id="main" class="content" style="position:absolute; top:64px; left:176px; right:32px; bottom:32px;z-index:11;visibility:hidden;overflow-y:auto; overflow-x:hidden">
<div id="book" class="content" style="position:absolute; top:64px; left:176px; right:32px; bottom:32px;z-index:12;visibility:visible;overflow-y:auto; overflow-x:hidden">
<div id="copyright" class="content" style="position:absolute; top:64px; left:176px; right:32px; bottom:32px;z-index:13;visibility:hidden;overflow-y:auto; overflow-x:hidden">

    <script>
function getSub() {
    var section = location.hash.slice(1);
    if (section == 'about') showMain();
    if (section == 'library') showBook();
    if (section == 'copyright') showCopyright();
}


function showMain() {
    hideBook();
    hideCopyright();
    document.getElementById("main").style.top = "64px";
    document.getElementById("main").style.visibility = "visible";
    document.getElementById("mainnav").style.background = "rgba( 255, 153, 0, 0.3)";
    document.getElementById("mainnav").style.borderBottom = "#FF9900 1px solid";
}

function hideMain() {
    document.getElementById("main").style.top = "100%";
    document.getElementById("main").style.visibility = "hidden";
    document.getElementById("mainnav").style.background = "rgba( 255, 153, 0, 0)";
    document.getElementById("mainnav").style.borderBottom = "#009900 1px solid";
}

function showBook() {
    hideMain();
    hideCopyright();
    document.getElementById("book").style.top = "64px";
    document.getElementById("book").style.visibility = "visible";
    document.getElementById("booknav").style.background = "rgba( 255, 153, 0, 0.3)";
    document.getElementById("booknav").style.borderBottom = "#FF9900 1px solid";
}

function hideBook() {
    document.getElementById("book").style.top = "100%";
    document.getElementById("book").style.visibility = "hidden";
    document.getElementById("booknav").style.background = "rgba( 255, 153, 0, 0)";
    document.getElementById("booknav").style.borderBottom = "#009900 1px solid";
}

function showCopyright() {
    hideMain();
    hideBook();
    document.getElementById("copyright").style.top = "64px";
    document.getElementById("copyright").style.visibility = "visible";
    document.getElementById("copyrightnav").style.background = "rgba( 255, 153, 0, 0.3)";
    document.getElementById("copyrightnav").style.borderBottom = "#FF9900 1px solid";
}

function hideCopyright() {
    document.getElementById("copyright").style.top = "100%";
    document.getElementById("copyright").style.visibility = "hidden";
    document.getElementById("copyrightnav").style.background = "rgba( 255, 153, 0, 0)";
    document.getElementById("copyrightnav").style.borderBottom = "#009900 1px solid";
}

function showZ1Preview() { document.getElementById("bookpic").style.backgroundImage = "url('zw1.jpg')"; }

function showD1Preview() { document.getElementById("bookpic").style.backgroundImage = "url('dw1.jpg')"; }

function showD2Preview() { document.getElementById("bookpic").style.backgroundImage = "url('dw2.jpg')"; }

function showD3Preview() { document.getElementById("bookpic").style.backgroundImage = "url('dw3.jpg')"; }
</script>


.content {
  padding-bottom            : 16px; /* 1/16 */
  padding-left              : 16px; /* 1/16 */
  color                     : #CCCCCC;
  border                    : #000000 solid 1px;
  border-top                : #009900 solid 1px;
  border-bottom-left-radius : 40px;
  background                : rgba( 0, 0, 0, 0.3);
  transition                : all 1s;
}

函数getSub（）{
var section=location.hash.slice（1）；
if（section=='about'）showMain（）；
if（section==“library”）showBook（）；
如果（部分==“版权”）显示版权（）；
}
函数showMain（）{
墨本（）；
hideCopyright（）；
document.getElementById（“main”）.style.top=“64px”；
document.getElementById（“main”）.style.visibility=“可见”；
document.getElementById（“mainnav”）.style.background=“rgba（255153,0,0.3）”；
document.getElementById（“mainnav”）.style.borderBottom=“#FF9900 1px solid”；
}
函数hideMain（）{
document.getElementById（“main”）.style.top=“100%”；
document.getElementById（“main”）.style.visibility=“hidden”；
document.getElementById（“mainnav”）.style.background=“rgba（255，153，0，0）”；
document.getElementById（“mainnav”）.style.borderBottom=“#009900 1px solid”；
}
函数展示本（）{
hideMain（）；
hideCopyright（）；
document.getElementById（“book”）.style.top=“64px”；
document.getElementById（“book”）.style.visibility=“可见”；
document.getElementById（“booknav”）.style.background=“rgba（255,153,0,0.3）”；
document.getElementById（“booknav”）.style.borderBottom=“#FF9900 1px solid”；
}
函数hideBook（）{
document.getElementById（“book”）.style.top=“100%”；
document.getElementById（“book”）.style.visibility=“hidden”；
document.getElementById（“booknav”）.style.background=“rgba（255,153,0,0）”；
document.getElementById（“booknav”）.style.borderBottom=“#009900 1px solid”；
}
函数showCopyright（）{
hideMain（）；
墨本（）；
document.getElementById（“版权”）.style.top=“64px”；
document.getElementById（“版权”）.style.visibility=“可见”；
document.getElementById（“版权导航”）.style.background=“rgba（255，153，0，0.3）”；
document.getElementById（“copyrightnav”）.style.borderBottom=“#FF9900 1px solid”；
}
函数hideCopyright（）{
document.getElementById（“版权”）.style.top=“100%”；
document.getElementById（“版权”）.style.visibility=“隐藏”；
document.getElementById（“版权导航”）.style.background=“rgba（255，153，0，0）”；
document.getElementById（“版权导航”）.style.borderBottom=“#009900 1px solid”；
}
函数showZ1Preview（）{document.getElementById（“bookpic”）.style.backgroundImage=“url（'zw1.jpg'）”；}
函数showD1Preview（）{document.getElementById（“bookpic”）.style.backgroundImage=“url（'dw1.jpg'）”；}
函数showD2Preview（）{document.getElementById（“bookpic”）.style.backgroundImage=“url（'dw2.jpg'）”；}
函数showD3Preview（）{document.getElementById（“bookpic”）.style.backgroundImage=“url（'dw3.jpg'）”；}
.内容{
填充底部：16px；/*1/16*/
左侧填充：16px；/*1/16*/
颜色：#中交；
边框：#000000实心1px；
边框顶部#009900实心1px；
边框左下半径：40px；
背景：rgba（0,0,0,0.3）；
过渡：所有1；
}

删除链接上的

href=“#版权”

，导航到版权选项卡。您之所以跳跃，是因为您不仅在启动js，而且还试图移动到绝对定位的对象

---

编辑：这是一个修复方案，但根本问题是布局对象的方式。绝对定位有时对于浮动对象很好，但在创建块级元素时应避免绝对定位

这似乎解决了眼前的问题。下次我做重大更新时，我会考虑你的建议。：）