<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. 使用babel es6 转 es5

    安装 //Webpack 接入 Babel 必须依赖的模块 npm i -D babel-core babel-loader //preset,告诉babel编译的文件中用到了哪些语法env包含当前所 ...

  2. es6☞对象的解构赋值

    变量必须与属性同名 let {name, age} = {name: 'wang', age: 22}; console.log(name, age); //wang 22 let {name} = ...

  3. Codeforces Round #576 (Div. 1) 简要题解 (CDEF)

    1198 C Matching vs Independent Set 大意: 给定$3n$个点的无向图, 求构造$n$条边的匹配, 或$n$个点的独立集. 假设已经构造出$x$条边的匹配, 那么剩余$ ...

  4. 1.sql统计语句

    select exam_item_code, exam_item, EXAMDATE, count(distinct patient_id) from (select t2.exam_item_cod ...

  5. Java中@SuppressWarnings（"unchecked"）的作用

    J2SE 提供的最后一个批注是 @SuppressWarnings.该批注的作用是给编译器一条指令,告诉它对被批注的代码元素内部的某些警告保持静默. 一点背景:J2SE 5.0 为 Java 语言增加 ...

  6. springboot整合redis缓存一些知识点

    前言 最近在做智能家居平台,考虑到家居的控制需要快速的响应于是打算使用redis缓存.一方面减少数据库压力另一方面又能提高响应速度.项目中使用的技术栈基本上都是大家熟悉的springboot全家桶,在 ...

  7. cmake用法及常用命令总结（全）

    CMakeLists.txt 的语法比较简单,由命令.注释和空格组成,其中命令是不区分大小写的.指令是大小写无关的,参数和变量是大小写相关的.但推荐全部使用大写指令.符号 # 后面的内容被认为是注释. ...

  8. (转)使用SDWebImage和YYImage下载高分辨率图，导致内存暴增的解决办法

    http://blog.csdn.net/guojiezhi/article/details/52033796

  9. flask-sqlalchemy使用及数据迁移

    flask-sqlalchemy是flask框架在sqlalchemy基础上改造的一个orm框架 现在有两个实体Article文章和Category分类 一个分类下可能有多篇文章 相关示例: 项目相关 ...

  10. Vue路由的使用和route-link router-view样式和动画的设置

    什么是路由 后端路由:**对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源: 前端路由:**对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面 ...