JaveWeb 公司项目(1)----- 使Div覆盖另一个Div完成切换效果
最近在做网页,用的是CSS+DIV的布局方法,搭建了一个简易的界面,大体上分为三个部分,如图所示:
左侧的为主功能导航栏,右侧是具体的功能实现,下方是固定的版权声明,单击左边不同的导航按钮,在div中放置不同的界面,最先的做法是每个功能写一个jsp文件,在主界面中通过.load()方法加入jsp文件,后来觉得jsp文件太多想合并到一个界面上来,通过div覆盖的方式,显示不同的界面,这时候问题来了,我事先放置了一个div文件,效果如图所示:
表格放置在指定的位置,我想先把表格隐藏,用了display:none这个方法,想用JQuery
document.getElementById("no1").style.display="block";
$("#main").appendChild("#no1");
进行加载,结果效果出错,如图所示:
表格内无数据显示且表格位置下移 于是我换了一个属性,先将DIV的属性设置为visibility: hidden,然后在js中改变属性为visible,这样点击按钮,就会显示出编译的Div控件 我在网上查了一下,在css中,display和visibility都可以隐藏元素,区别在于visibility:hidden在隐藏一个元素的同时仍然在页面上为该元素保留所需的空间,而display:none则表现得像把元素从页面里删除了,在页面上看不出该元素还存在着。 另外,display:block中的block元素会在页面中独占一行,这就是为什么我在改变隐藏属性的时候整体Div向下移动了一行的原因
JaveWeb 公司项目(1)----- 使Div覆盖另一个Div完成切换效果的更多相关文章
- CSS中div覆盖另一个div
将一个div覆盖在另一个div上有两种手段:一是设置margin为负值,二是设置绝对定位. 可以根个人情况设置z-index的值 1->position 为absolute的情况 <htm ...
- JaveWeb 公司项目(2)----- 类模态窗口显示DIV并将DIV放置在屏幕正中间
上一篇博客写的是通过隐藏显示进行div的替换,接下来需要在原有的div前添加一个div,进行表单的提交,需要将div放置在正中间,然后类似C#中的模态窗口,在进行完新弹出的div操作之后,才可以进行下 ...
- 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏
设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...
- 点击一个div隐藏另一个div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 一个div在另一个div中水平垂直的方法
html <div id="main"> <div id="box"> 一个div在另一个div中垂直居中实现方法 </div&g ...
- 怎样把一个DIV放到另一个div右下角
怎样把一个DIV放到另一个div右下角??? 借助CSS定位来实现,你将右下角的那个DIV放在另一个DIV里面,参考代码如下示: <div id="box1"> < ...
- JaveWeb 公司项目(7)----- 通过JS动态生成DIV
Web网页项目的数据表格功能已经大体完成,下面是另一个主要功能,在线视频的显示 目前我做的项目是渔政监控方面,在之前C#的版本中已经实现了摄像头的在线监控,用的海康封装好的SDK,目前需要做的工作是在 ...
- 一个div居于另一个div底部
一个div如何与另一个div底部对齐,方法有很多,比如使用绝对定位 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...
- JaveWeb 公司项目(6)----- 通过ToolTip给控件添加动态注释
现在公司的项目进展到了视屏这一块,关于海康网页端的构建我会另外写一篇博客来详细讲解,这一篇的博文主要讲的是我刚刚遇到的一个小问题 连接上了视屏之后,将控制按钮换成图标,方位按钮比较好理解,调焦调距的按 ...
随机推荐
- python内置函数的简单使用和介绍
"""内置函数的简单使用和介绍参考链接:https://docs.python.org/3/library/functions.html ""&quo ...
- python 之xml.etree.ElementTree
Element类型是一种灵活的容器对象,用于在内存中存储结构化数据. [注意]xml.etree.ElementTree模块在应对恶意结构数据时显得并不安全. 每个element对象都具有以下属性: ...
- 动手动脑-Java的方法重载
例: Using overloaded methods public class MethodOverload { public static void main(String[] args) { ...
- 前端框架VUE----指令
一.什么是VUE? 它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 二.怎么使用VUE? 1.引入vue.js 2.展示HTML <div id=" ...
- maven编译项目报错,提示找不到符号或程序包XXX不存在
我的原因是maven依赖的jar包都下载了,但是引用的同一个项目下其他模块jar包找不到 解决方法: 把需要的jar包在pom里添加依赖 再次运行项目,Maven Dependencies下就会多了几 ...
- ucos ii 46个系统API函数解析
源: ucos ii 46个系统API函数解析
- Java笔记 #03# HtmlUnit爬虫
存档留用 (= 存档留着备用) 爬的是一个开放的自动回复机器人 API 网站 http://i.itpk.cn/. 结构 大致如下: 我做的事情就是[输入文字,点击按钮,爬取内容],如上图所示. pa ...
- scrapy 自定义图片路径保存,并存到数据库中
scrapy中有个自带的pipeline工具,ImagesPipeline,可以专门用来储存图片到本地. 但默认储存地址无法配置,所以我们需要写一个自己的pipeline用于储存图片. 先分析一下我们 ...
- Vue小案例 之 商品管理------删除商品与提示
实现删除商品功能 根据索引来进行删除商品: 实现删除商品的HTML: <!--显示表格--> <div class="table-warp"> <di ...
- 【题解】 Luogu P4312 / SP4155 [COCI 2009] OTOCI / 极地旅行社
原题地址:P4312 [COCI 2009] OTOCI / 极地旅行社/SP4155 OTOCI - OTOCI lct入门难度的题,十分弱智(小蒟蒻说lct是什么,能吃吗?) bridge操作判联 ...