最近正在研究用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>
对整个页面进行跳转,就不会出现左右不一致的画面了
本文算是一个小坑总结吧,希望可以帮到大家哦~