Question

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

http://www.victorsheckels.com

页面的相关部分是：

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

Answer 1

删除链接上的href="#copyright"以导航至版权标签。你正在跳跃，因为你不仅要解雇你的js，还要尝试移动到绝对定位的物体。

编辑：这是一个修复，但潜在的问题是你放置对象的方式。浮动事物的绝对定位有时很好，但在创建块级元素时应该避免。

javascript页面加载导致页面崩溃

1 个答案: