<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>js显示隐藏层</title>

<script language="JavaScript" type="text/JavaScript">

<!--

function showdiv(targetid,objN){

      var target=document.getElementById(targetid);

      var clicktext=document.getElementById(objN)

            if (target.style.display=="block"){

                target.style.display="none";

                clicktext.innerText="点击查看详细信息";

            } else {

                target.style.display="block";

                clicktext.innerText='关闭详细信息信息';

            }

}

-->

</script>

<style type="text/css">

<!--

body { font: normal 14px "宋体" }

a { text-decoration: none; }

#showtext { cursor: hand; cursor:pointer;}

#showtext2 { cursor: hand; cursor:pointer;}

#contentid { margin-top: 10px; width:100%; border: 1px solid #CCC; background: #F1F1F1; padding: 15px; }

#contentid2 { margin-top: 10px; width: 470px; border: 1px solid #CCC; background: #F1F1F1; padding: 15px; }

.none { display: none; }

-->

</style>

</head>

<body>

<a id="showtext" onClick="showdiv('contentid','showtext')">点击查看详细信息</a>

<div id="contentid" class="none">打开的内容</div>

<p></p>

<a id="showtext2" onClick="showdiv('contentid2','showtext2')">点击查看详细信息</a>

<div id="contentid2" class="none">

1.<br />

2.<br />

3.<br />

4.<br />

5.<br />

6. <br />

7.<br />

8. <br />

9.<br />

10.<br />

11.<br />

12. <br />

13.<br />

14. <br />

15.<br />

</div>

</body>

</html>

js控制div显示与隐藏的更多相关文章

  1. css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  2. 通过select下拉框里的value控制div显示与隐藏

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. js 控制div 显示隐藏的问题

    var divs = document.getElementsByTagName("div");得到所有的divfor(var i=0;i<divs.length;i++){ ...

  4. js中div显示和隐藏钮为什么页面总是跳一下到最上面

    <div class="menu_left"> <ul > <li id="t1" style="background- ...

  5. JS控制DIV隐藏显示

    转载自:http://blog.sina.com.cn/s/blog_6c3a67be0100ldbe.html JS控制DIV隐藏显示 一,需求描述: 现在有3个DIV块,3个超链接,需要点击一个链 ...

  6. 功能整合（一）：滚动条的变相隐藏、js控制div的渐变显示、滚动条监听

    1.滚动条的变相隐藏 思路: 1.  把body的横向,纵向的超出部分隐藏,宽设置100%:高设置100%.就没有body的滚动条了, 2.  然后把最外层的div的宽设置的比body的宽宽一点,把d ...

  7. js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  8. js 控制Div循环显示 非插件版

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquery之超简单的div显示和隐藏特效demo

    闲着无聊,看到某视频网站上讲的DIV显示和隐藏的效果,自己也写了一个. 觉得还是挺简单的. 前端改变世界!嘿嘿,还挺有成就感 <!DOCTYPE html PUBLIC "-//W3C ...

随机推荐

  1. 几种在shell命令行中过滤adb logcat输出的方法

    我们在Android开发中总能看到程序的log日志内容充满了屏幕,而真正对开发者有意义的信息被淹没在洪流之中,让开发者无所适从,严重影响开发效率.本文就具体介绍几种在shell命令行中过滤adblog ...

  2. 前端复制功能的若干 -- document.execCommand()

    最近涨停科技公司实习,由于backend基础太弱...强行前端了一把..搞了两周才搞下页面里copy的功能,期间有些琐碎,恐忘,记录在此. 目前copy主流有四种方式:ZeroClipboard,Cl ...

  3. Chapter 1 First Sight——4

    Charlie gave me an awkward, one-armed hug when I stumbled my way off the plane. 当我让我蹒跚的从飞机上下来,查理斯单手给 ...

  4. javascript学习01

    1/js 中所有的数字都是浮点型,所以5/2=2.5    6.5%2.1=0.2 2/delete用于删除对象的属性或者是数组元素: var o={x=1,y=2}:delete o.x;  x i ...

  5. 使用strace+pstack利器分析程序性能

    引言 有时我们需要对程序进行优化.减少程序响应时间.除了一段段地对代码进行时间复杂度分析,我们还有更便捷的方法吗? 若能直接找到影响程序运行时间的函数调用,再有针对地对相关函数进行代码分析和优化,那相 ...

  6. nano编辑器的设置

    1.取消nano的默认编辑 自己的虚拟机ubuntu不知道怎么搞的,在添加定时任务的时候总是 编辑,一开始不知道,百度了以下这个是所谓的nano,在定时任务的时候总是默认出来,自己习惯了vi,nano ...

  7. [Big Data]hadoop分布式系统在Linux系统安装

    待完善 Hadoop2.6.0部署与应用 一.    环境准备 硬件:3台虚拟机 内存:至少512MB 硬盘:至少20G 操作系统:rhel6.4  64位 最小化安装 主机名 IP(局域网) 描述 ...

  8. Spring的5种事物配置方式

    Spring事务配置的五种方式 前段时间对Spring的事务配置做了比较深入的研究,在此之间对Spring的事务配置虽说也配置过,但是一直没有一个清楚的认识.通过这次的学习发觉Spring的事务配置只 ...

  9. sping 对 hibernate进行事务管理--Annotation, xml, 大多数使用XML

    1. UserServiceTest.java: package com.bjsxt.service; import org.junit.Test; import org.springframewor ...

  10. vector与ArrayList、hashmap与hashtable区别

    一.vector与ArrayList区别     首先要说明的是vector和arraylist都是list的实现类,都是代表链表的数据结构.     java.util.Vector;  类中 pa ...