小代码   HTML 每个按钮控制一个DIV   js实现

 <!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=gb2312" />
<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 "宋体" }

 

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

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

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

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

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

.none { display: none; }
-->
</style>
</head>

<body>
<button type="button"id="wzshowtext" onClick="showdiv(‘wzcontentid‘,‘wzshowtext‘)">打开编辑</button>
 

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

<hr>
<button type="button"id="showtext" onClick="showdiv(‘contentid‘,‘showtext‘)">打开编辑</button>
<div id="contentid" class="none">打开的内容</div>

<p></p>
<button type="button"id="showtext2" onClick="showdiv(‘contentid2‘,‘showtext2‘)">打开编辑</button>
<div id="contentid2" class="none"> 
打开的内容   
</div>

</body>

</html>
时间: 2025-01-04 08:42:51

小代码   HTML 每个按钮控制一个DIV   js实现的相关文章

用css控制一个DIV画图标。

在实际开发中,我们会用到一些小图形,图标.大多数情况下都是用图片来实现的,同时对图片进行处理使图片大小尽可能的缩小.但是图片在怎么处理也是按KB来算的.但是要是用CSS画,只要用很少的空间就能完成同样的效果了,而且还方便后期的维护.我们今天画四个图形,一个三角形,一个直角三角形,两种方法画多边框正方形,同心圆,分享图标. 三角形 首先,我们先画一个三角形 代码如下: 1 <div id="duo1"></div> 对 就是用一个DIV来画. 我们可以把这幅图补脑

通过hover来控制一个div的展示和隐藏

css 代码: .float_tips_area { position:absolute; background-color: #ffffff; border-radius: 5px; display:none; right:20px; width:70%; z-index: 1000; } .mgf_tips_icons{ display:inline-block; padding-left: 5px; } .mgf_tips_icons:hover .float_tips_area{ dis

php 小代码(2)-----给定一个字符串时间得到其时间所在的当周的周一及周日时间

<?php  $strTime = '2015-06-28 19:20:58';         $middletime = strtotime($strTime);         $week = date('w',$middletime);         if ($week == 0) {             $week = 7;         }                  $monday = date('Y-m-d', strtotime('+' . 1 - $week .

小程序点击按钮打开一个视频

原文地址:https://www.cnblogs.com/antyhouse/p/9356276.html

【转】一个DIV+CSS代码布局的简单导航条

原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现.同时不用图片做背景,直接使用背景色实现,鼠标经过悬停对应栏目名称是对应背景蓝色变深. 导航条部分效果截图 一般导航条采用ul li列表布局,这里也不例外DIVCSS5实例也采用列表标签ul li+ CSS布局. 一.布局思维思考   -   TOP 在实际DIV+CSS布局项目中,一般不会只使用一次

初识安卓小程序(开关灯——单选多选按钮控制)

如图: 点击单选按钮"开灯",多选按钮就会显示"关灯"且方块里有对勾:反之,点多选按钮,单选按钮也自动改变. 首先,先创建一个安卓项目(我的版本是4.4.2的),名字为"bulb",把两张图片:开灯与关灯状态的图片放入"drawable-"随意一个文件夹下 然后在res文件夹下找到layout文件夹,找到activity_main.xml或fragment_main.xml,在里面输入或拖拽按钮 <RelativeLay

页面table的每行都有一个&lt;input type=&#39;button&#39; /&gt;,如何实现点击按钮在按钮下方弹出一个div,点击空白消失

\ <input id="test" type="button" />/*按钮*/ <div id="tanchu"></div> <script language="javascript"> $(document).ready(function(e) { $("#test").click(function(e) { $("#tanchu"

点击文字弹出一个DIV层窗口代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>点击文字弹出一个DIV层窗口代码</title> <style> .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height:

iOS开发中一些有用的小代码

1.判断邮箱格式是否正确的代码: //利用正则表达式验证 -(BOOL)isValidateEmail:(NSString *)email { NSString *emailRegex = @"[A-Z0-9a-z._%+-][email protected][A-Za-z0-9.-]+\\.[A-Za-z]{2,4}"; NSPredicate *emailTest = [NSPredicate predicateWithFormat:@"SELF MATCHES%@&qu