一个网页展开合并的小例子

最新推荐文章于 2022-03-16 13:43:45 发布
最新推荐文章于 2022-03-16 13:43:45 发布
阅读量1.1k 收藏
点赞数
分类专栏： Java 文章标签： javascript border class div function 相册
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/happycyp/article/details/1352862
版权

<SCRIPT language=JavaScript>
<!--

function showDetail(x){
 if(document.getElementById("con"+x).style.display!='none') {  
  document.getElementById("con"+x).style.display='none';  
  document.getElementById("fronta"+x).style.display='block';
  document.getElementById("frontb"+x).style.display='none';
 }
 else{
  document.getElementById("con"+x).style.display='block';
  document.getElementById("fronta"+x).style.display='none';
  document.getElementById("frontb"+x).style.display='block';
 }

}
//-->
</SCRIPT>
<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY text=#000000 vLink=#555555 leftMargin=0 topMargin=0 marginheight="0"
marginwidth="0">
            <TABLE cellSpacing=2 cellPadding=3 width=199 border=0>
              <TBODY>
              <TR class=style13>
                <TD colSpan=2 background="nn02.gif">
                  <DIV id=fronta1 style="DISPLAY: none"><A
                  href="javascript:showDetail(1);"><IMG
                  src="close.gif" border=0></A>超强性能1</DIV>
                  <DIV id=frontb1><A href="javascript:showDetail(1)"><IMG
                  src="open.gif" border=0></A>超强性能2</DIV></TD></TR>
              <TR class=style16>
                <TD vAlign=top width=12></TD>
                <TD class=style14x width=169>
                  <DIV id=con1
                  style="DISPLAY: block">超大容量、超大附件<BR>超快速度<BR>超级稳定<BR>超高安全<BR>极速风格</DIV></TD></TR>
              <TR class=style13>
                <TD colSpan=2 vAlign=top background="nn02.gif">
                  <DIV id=fronta2 style="DISPLAY: none"><A
                  href="javascript:showDetail(2);"><IMG
                  src="close.gif" border=0></A> 强大功能与服务1</DIV>
                  <DIV id=frontb2><A href="javascript:showDetail(2);"><IMG
                  src="open.gif" border=0></A> 强大功能与服务2</DIV></TD></TR>
              <TR class=style13>
                <TD></TD>
                <TD><SPAN class=style14x>
                  <DIV id=con2 style="DISPLAY: block">280兆免费网盘<BR>我的相册<BR>智能通讯录
                <BR>自动回复功能 <BR>邮箱双克隆<BR>24小时服务热线</DIV></SPAN></TD></TR></TBODY></TABLE>
            <BR></TD></TR></TBODY></TABLE>

</body> 

以下是效果图片，例子是从网易的网页中取下来的。

 

happycyp
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端基础知识点-每天一个基本知识点（100+个前端小知识，你是否都知道？）
m0_67394006的博客
03-02 9107
文章目录 前言 第一回合 一、知识点：cookie（21/09/06） 二、知识点：节流和防抖（21/09/07） 三、知识点：var和let以及const（21/09/08） 四：知识点：深拷贝和浅拷贝（21/09/09） 五、知识点：作用域和作用域链（21/09/10） 六、知识点：从输入URL到页面展示这中间发生了什么（21/09/11） 七、知识点：重排和重绘（21/09/12） 八、知识点：TCP和UDP（21/09/13） 九、知识点：三次握手（21/09/15） 十、知识点：绝对定位和相对定
h5 iframe嵌套页面_如何将一个HTML页面嵌套在另一个页面中
weixin_39552037的博客
12-19 5831
展开全部这个在做网页中常e69da5e887aa62616964757a686964616f31333339666636要用到，有些通用的内容可集中放在一个页面文件中，其它要用到这些内容的页面只需要包含(引用)这个通用文件即可。这样便于维护，如果有很多网页，当通用内容需要修改时，只改一个文件就可以了，不需要每个文件单独修改。最典型的应用比如页脚的版权信息等内容可以放在一个叫做footer.html...
jquery简单实现网页层的展开与收缩效果
10-23
主要介绍了jquery简单实现网页层的展开与收缩效果的方法,涉及jquery中toggle结合animate方法操作页面元素属性的相关技巧,非常简单实用,需要的朋友可以参考下
网页的展开
weixin_33817333的博客
09-11 470
2019独角兽企业重金招聘Python工程师标准>>> ...
javascript实现网页展开效果
weixin_33895695的博客
11-25 320
2019独角兽企业重金招聘Python工程师标准>>> ...
网页顶部广告展开与收起
从零出发
11-07 1128
网页顶部广告展开与收起 在很多网站中，为了广告推送效果，往往会在进入网站的时候，出现弹窗；一定时间后，再次收起，不影响用户的体验。 代码思路分析 进入页面，广告页面 自动 展开收起，说明我们可以使用 计时器 完成。我们可以实时改变广告页面的 高度 ，以达到相应的动画效果。 代码结构 HTML文件 &lt;div id="advertising"&gt; &lt;img id="adverti...
web端项目如何展开测试
噔噔噔噔的博客
11-29 150
web端项目如何展开测试 整体界面的页面结构设计，当用户浏览Web应用系统时是否感到舒适，设计风格是否一致。 所有链接的测试，比如链接是否存在，链接是否孤立，链接是否链接指向页面 用户注册、登陆、信息提交时是否完整，以校验提交给服务器的信息的正确性 ...
一个对GridView控件进行展开折叠展示Grid数据源的程序例子
09-29
在“一个对GridView控件进行展开折叠展示Grid数据源的程序例子”中，我们看到一个利用ajax、JavaScript以及C#技术来实现数据的动态展开和折叠的功能。这一功能在展示大量数据时特别有用，因为它可以提高页面的可读性...
jquery实现网页右侧可展开折叠的DIV特效
06-01
总结来说，这个特效利用了jQuery的强大功能，通过简单的DOM操作和动画效果，实现了网页右侧的可展开折叠DIV，并加入了扇叶式的展开合并效果，提升了用户的交互体验。通过学习和实践此类技术，开发者可以更好地掌握...
午夜城市BLOG网页模板
01-22
【午夜城市BLOG网页模板】是一个专门为博客设计的网页模板，它采用了深色调的主题，营造出一种深夜城市的独特氛围，旨在为用户带来沉浸式的阅读体验。这个模板适合那些喜欢在静谧夜晚分享故事或者感悟的博主使用。...
网页点击弹出、展开层效果集合
11-23
163网盘折叠菜单*******div显示隐藏效果*********层展开关闭-运动缓冲效果**********动画效果打开层 关闭层************腾讯页内弹出窗口效果....... 开源程序 简约而不简单！对于学习html，提高兴趣非常有好处！..........
html展开收起样式,前端网页内容实现展开/收起全文的操作（js+css控制高度实现）...
weixin_31865445的博客
05-30 3136
在展示大量文本的时候,很多网站会在页面上出现一个展开全文的文字按钮 , 点击这个按钮才会展开全部内容.使用jquery比较容易实现,控制div的高度展现。思路是 , 获取当前html文本的div高度 ,超过一定高度就增加一个class值 . 它旁边的点击展开全文默认隐藏 , 超过高度展示 .展开全文点击后更换文字内容为收起全文下面直接展示代码：1、html的div文本内容比如是这样内容.........
web前端数据表格有合并项的一种简单实现方法
丰云 之 薪火
06-07 6042
今天一个同学在QQ里问，如何实现前端数据表中有合并项的效果， 在QQ里打字说不清楚，于是写了一个简单的例子说明问题， 现在记录下来，以备后用： 先写一个基本的html页面： <!DOCTYPE html /> <html> <head> <title>test table</title> </head> &l...
html页面内容的收缩和展开效果
热门推荐
王永存
02-08 3万+
html页面内容的收缩和展开效果 常见的网页中，会见到收缩和展开的效果。比如经常浏览网页里的新闻内容就会经常看到这种效果，新闻的内容只显示少数的一部分，然后后面会跟一个展开的链接，点击这个链接才会显示全部的新闻内容。 1、收缩情况下显示内容效果 2、点开之后显示的内容效果 3、实现的代码如下： <!DOCTYPE html> <html lang="e...
web 端展现报表数据时如何实现折叠展开效果？
rqgxy的博客
05-26 934
1、 如果有报表工具，且报表工具内置了折叠属性设置，那么可以直接通过简单配置实现表格数据的折叠展开效果，具体操作配置可以参考 如何实现伸缩 (折叠) 报表？ 这种实现方式对开发人员技术要求比较低，操作方式也简单；web 端折叠打开的操作不需要刷新计算，性能相对比较高。 2、 如果报表工具没有折叠功能，那么可以通过 jQuery 的 show()、hide() 方法对报表进行 tr 的显示、隐藏操作。 这种实现方式需要开发人员学习 jQuery，对 js 的要求比较高，初次展现大数据量时会相对慢些。 .
网页折叠展开效果
weixin_33901843的博客
11-16 1992
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="jquery-1.11.3.js"></script> </head&gt...
点击收起时页面回到展开时的位置
baidu_38027860的博客
04-24 2534
写的并不好，逻辑说一下，第一次点击展开的时候记录下当前的滚动条位置，收起时回到滚动条的位置即可。html代码：&lt;div class="ceshi" style="width: 300px;border: 1px solid #ddd;height: 300px;background: orange;"&gt;&lt;/div&gt;js代码：var count = 0;     div ...
WEB HTML 二级菜单 折叠展开菜单
小西瓜吖的博客
03-16 1万+
WEB，HTML，二级菜单，折叠展开 一、效果图： 二、完整代码： 直接复制 浏览器打开即可。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>菜单</title> <!-- JS --> <script language="javascript"&g
html表的展开与收缩,jquery简单实现网页层的展开与收缩效果
weixin_32369749的博客
05-31 327
本文实例讲述了jquery简单实现网页层的展开与收缩效果。分享给大家供大家参考。具体如下：这里演示了jquery网页层展开、层收缩代码，带缓冲动画效果，点击指定的文字或按钮，可展开指定层，再次单击会收起层，类似效果网上已见到许多，请根据自己的需要修改代码，别忘了引入最新的jQuery插件哦。运行效果截图如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD...
HDFS小文件合并策略：使用Archive解决存储难题
每个小文件至少会被分割为一个Block，这会导致NameNode节点内存消耗大，尤其是在拥有众多小文件的情况下。Hadoop Archive (HadoopArchives)作为一种解决方案，被引入来解决这个问题。 Hadoop Archive是一个用于将多...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值