DIV,CSS如何实现“加减号”“显示隐藏”效果

html-css08

DIV,CSS如何实现“加减号”“显示隐藏”效果,第1张

(1)1、js方法,这是一般网站常用的方法。

优点:兼容性好,易管理。

实现方式:按钮

onclick

触发

目标div

显示/隐藏。

代码有很多。

2、纯css方法:这是为了应付考试,掌握灵活性而用

缺点:需要支持css3的浏览器,兼容性不佳。

实现方法:利用css的伪类选择,将整个一体放到一个div中,包括

触发按钮、标题、内容。在div的css上写高度、overflow:hidden,在hover或active伪类上写新的高度即可,并不太实用。特意为你写的示例:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style type="text/css">

#box { width:400pxheight:30pxborder:1px #666666 solidpadding:10pxoverflow:hidden}

#box h5{ border:1px #666666 solidheight:30pxmargin:0padding:0}

#box p{ border:1px #666666 solid}

#box:hover { height:100px}

</style>

</head>

<body>

<div id="box">

<h5>+ 标题</h5>

<p>这里是内容,也可以用 #box:active { height:100px},这是鼠标按下的效果。</p>

</div>

</body>

</html>

(2)CSS是用级联样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

只需设置

display:none

即可将该元素设为隐藏的。默认的是显示的,即不设置display即默认显示。

isplay 属性规定元素应该生成的框的类型,定义建立布局时元素生成的显示框类型。

display的值可以取如下的值:

none此元素不会被显示。

block此元素将显示为块级元素,此元素前后会带有换行符。

inline默认。此元素会被显示为内联元素,元素前后没有换行符。

inline-block行内块元素。(CSS2.1 新增的值)

方法:打开html开发软件,新建一个html文件,在html文件上创建一个button按钮,然后给这个按钮设置一个id,在案例中把按钮的id设置为show。

然后创建一个隐藏的div,把需要隐藏的内容写到这个div上,然后给这个div设置一个id,在案例中设置案例的id为hide。给div设置隐藏的样式。在<title>标签后面为id为hide设置样式display:none,这个样id为hide的div就会被隐藏掉了。

写一段JS代码,来改变div的display属性为'none',要显示就为空,比较简单的实现.style.display就是控制层隐藏或显示的属性.

DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。DIV在编程中又叫做整除,即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。