Question

我有一个bootsrap导航栏，它的每个菜单元素都有一个href属性，用于浏览页面。当我点击时，导航栏中的一个元素消失了，当然因为我离开了包含它的页面。但是我怎么能做到这一点呢？一个始终可见的导航栏固定顶部，每个html页面（导航栏元素）都保留在导航栏所在的页面上。（没有数据库）

:not

Answer 1

您可以这样做：

<div id="navbar">
    <a href="javascript:goto('http://google.com')">Google</a>
    ...
</div>
<iframe id="frame" width="100%" height="100%">Update Browser!</iframe>
<script>
  function goto(url){
    document.getElementById("frame").src=url;
  }
</script>

这会将点击的链接加载到iframe中。页面保持不变，因此导航栏仍然可见。您还可以将所有链接标记重定向到iframe：

    <div id="navbar">
    <a href="http://google.com">Google</a>
    ...
</div>
<iframe id="frame" width="100%" height="100%">Update Browser!</iframe>
<script>
  window.onload=function (){
      [...document.getElementsByTagName("a")].forEach(function(a){
         a.onclick=function(e){
            e.preventDefault();//the redirect
           document.getElementById("frame").src=this.href;
         }
      });
  };
</script>

或者如果你喜欢jquery.load：

<div id="navbar">
    <a href="http://google.com">Google</a>
    ...
</div>
<div id="content"></div>
<script>
$(document).ready(function(){
  $("a").each(function(){
     this.on("click",function(e){
        e.preventDefault();
        $("#content").load(this.href);
      });
  });
});
</script>

在href之后如何使导航栏保持可见？

1 个答案: