<head>
<script type="text/javascript">
function change_div(id){
  if (id == 'gsywly' )
  {
     document.getElementById("gsgs").style.display = 'none' ;
     document.getElementById("gsywly").style.display = 'block' ;
  }
  else
  {
     document.getElementById("gsywly").style.display = 'none' ;
     document.getElementById("gsgs").style.display = 'block' ;
  }
}
</script>

<style type="text/css">

    #gsywly { display:none;}

    li{list-style: none;}
</style>
</head>

<body>

<ul>

         <li id="a"><a href="#" onclick="change_div('gsgs')">集团公告</a></li>
         <li id="b"><a href="#" onclick="change_div('gsywly')">单位公告</a></li>

    </ul>

  <div id="gsgs">A</div>
  <div id="gsywly" >B</div>
</body>

点击按钮切换内容效果(使用CSS DIV与JavaScript)的更多相关文章

  1. JQuery实现点击按钮切换图片(附源码)--JQuery基础

    JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...

  2. js 实现页面点击按钮复制内容

    前言: 我们平时在页面中是按照长按来实现复制相关的内容,那么怎么用js实现点击按钮实现复制相关的内容呢?请看如下方法: 实现步骤: 1.引入相关的js(ClipboardJS插件) <scrip ...

  3. jquery点击按钮复制内容

    做移动端的项目遇到一个需求要点击按钮复制dom里的内容,看了很多资料显示必须textarea或者input里的内容才能简单复制,还有就是用插件的了,最终都因为遇到各种问题放弃,最终选择了最简单的点击复 ...

  4. JAVA Eclipse如何设置点击按钮切换图片

    右击图片文件夹,新建一个Android XML文件   设置文件的名称,注意这个新建的xml文件就是会被用作按钮的background属性的,所以名字不要太奇怪,设置Root Element为sele ...

  5. js构建函数，点击按钮显示div，再点击按钮或其他区域，隐藏div

    这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...

  6. 鼠标经过图片时变换的两种方法--css+div及javascript应用

    javascript方式:    熟悉使用document.getElementById()取得节点对象 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...

  7. js实现点击不同按钮切换内容

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JQ实现点击两个按钮切换内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  9. 例题.点击按钮显示内容+弹窗效果+ajax

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

随机推荐

  1. PowerBuilder学习笔记之删除和加载PBL文件的方法

    删除PBL目录的方法:直接点删除键删除 加载PBL文件的方法:点Browse按钮选择PBL文件

  2. php批量检测并去除BOM头的代码

    开发中会遇到BOM头, 导致程序无法执行. 浏览器返回接口如下图: 去除BOM头解决方法:<?phpini_set('memory_limit','1024M'); function check ...

  3. iOS - 毛玻璃特效

    iOS7.0的SDK并没有提供给开发者实现毛玻璃效果的API,所以很多人都是通过一些别人封装的框架来实现 iOS7.0(包括)之前还是有系统的类可以实现毛玻璃效果的, 就是 UIToolbar这个类, ...

  4. 时间都去哪儿了？开源一个统计iPhone上App运行时间和打开次数的小工具【iOS8已失效】

    如今,大家每天都有大量时间花在手机上,但是,大家有没有想过自己的时间都花在哪些App上了呢?相信很多人都有这样的需求,不过iOS系统本身并不能显示每个App的运行时间和次数,因此,本人写了这样一个小工 ...

  5. stm32和sd卡

    SD卡从容量上讲分两种:标准容量和大容量,最小的是标准容量,小于等于2G 其中的访问关系如下: SD卡分为两种模式:认证模式和传输模式,每一个模式包含着不同的状态,如下 以下主要讲其初始化过程: SD ...

  6. 5.JUC之JDK自带锁ReentrantLock

    一.初识 ReentrantLock出身自jdk1.5,中文名:可重入锁 是Java JDK自带独占锁的唯一实现,是synchronized的升级版 1.我们之间有个synchronized 我们已经 ...

  7. 解决 google 浏览器记住密码导致输入框样式改变（变成淡黄色背景）

    直接在页面上使用css代码: input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill { -webkit ...

  8. echarts的一点记录

    echart官网地址: https://www.echartsjs.com/index.html echarts实例地址:https://echarts.baidu.com/examples/ vue ...

  9. 一个 Git 分支协作模式的进化故事

    从不用版本管理到使用 Git 分支管理的故事,也就是从这个时候开始的... 某公司只有一个程序员,一开始并没有版本管理的概念.项目开发只有一个人在参与,所以也没用版本管理工具. 后来,老板又招了两个程 ...

  10. 支付宝APP支付(基于Java实现支付宝APP支付)

    贴一下支付核心代码,以供后续参考: 业务层 import com.alipay.api.AlipayApiException; import com.alipay.api.AlipayClient; ...