HTML页嵌套导航栏且实现页面跳转

最新推荐文章于 2025-03-05 18:46:38 发布

潘甜甜！

最新推荐文章于 2025-03-05 18:46:38 发布

阅读量1.6w

点赞数 15

分类专栏：总结文章标签： html javascript

本文链接：https://blog.youkuaiyun.com/PanTianTianO/article/details/116200428

版权

总结专栏收录该内容

10 篇文章

订阅专栏

最近正在研究用python解析表格并用图表的形式对数据进行展示，由于是个小demo，前后就一起写了，然后在写前端页面的时候想加一个导航栏，刚开始使用的是用table去进行规划，最后的效果是横向导航栏，但是我期望的是侧边导航栏，于是又开启了新一轮的摸索…

使用iframe进行页面嵌套
将整个页面划分为一个大的div，然后分成两个小的div，左边的div嵌套导航页面，右边的div展示需要展示的东西
下图为嵌入导航页的代码，src为嵌套页面路径，配置一下宽高，然后左边悬浮

<div class="left">
    <iframe src="/getmenu" width="200px" height="100%" scrolling="no" border="0" frameborder="0" align="left"></iframe>
 </div>

导航栏直接使用ul>li标签
导航栏页面如果用表格代码会十分繁琐，有很多冗余的tr td，所以这里直接使用了ul>li标签
因为是导航栏，所以每一个都需要进行页面跳转，加了a标签，此时坑就来了…

<body>

     <ul>
         <li><a href="#" onclick="getmothon()">每月任务总数</a></li>
         <li><a href="#" onclick="getthree()">3月每日工作量</a></li>
         <li><a href="#" onclick="getgroup()">组任务量总结</a></li>
         <li><a href="#" onclick="geteveryonejy()">交易组每人工时总结</a></li>
         <li><a href="#" onclick="geteveryoneyx()">营销组每人工时总结</a></li>
     </ul>
 </body>

页面跳转踩坑
刚开始实现页面跳转的时候，我是直接在href属性上添加的链接，这个时候就会出现只有左边导航栏的页面进入了新页面，而右侧的页面还是保持原来的页面不变，这就是很尴尬的事儿了，整个页面会出现很滑稽的效果
实现整个页面跳转
后来又查了一些资料，有一个top.location.href的方法，top.location.href是指最外层的页面进行跳转，于是才有了这个onclick的方法

<script type="text/javascript">
        function getmothon(){
            top.location.href = 'http://localhost:5000/getmothon'
        }
        function getthree(){
            top.location.href = 'http://localhost:5000/getthree/3'
        }
        function getgroup(){
            top.location.href = 'http://localhost:5000/getgroup'
        }
        function geteveryonejy(){
            top.location.href = 'http://localhost:5000/geteveryonejy'
        }
        function geteveryoneyx(){
            top.location.href = 'http://localhost:5000/geteveryoneyx'
        }
    </script>