<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. 编译内核提示mkimage command not found – U-Boot images will not be built

     转載與:http://www.mr-wu.cn/u-boot-tools-binary-package-in-ubuntu/ ubuntu 编译linux kernel时提示: “mkimage” ...

  2. elk 流程图

    ELK流程图 单纯使用ElK实现分布式日志收集缺点: 1.logstash太多了,扩展不好. 2.读取IO文件,可能会产生日志丢失 3.不是实时性 这时候就需要引入 kafka. kafka基于主题模 ...

  3. hdu 2822 ~！！！！！！坑死我

    首先 在此哀悼...  为我逝去的时间哀悼...  每一步都确定再去写下一步吧...日狗 不过还是有点收获的..  对优先队列的使用 有了进一步的理解 先上代码 #include<iostrea ...

  4. pip源设置为国内源

    windows系统步骤如下: (1)打开文件资源管理器(文件夹地址栏中) (2)地址栏上面输入 %appdata% (3)在这里面新建一个文件夹 pip (4)在pip文件夹里面新建一个文件叫做 pi ...

  5. 在论坛中出现的比较难的sql问题：18(字符合并 整数解析星期几)

    原文:在论坛中出现的比较难的sql问题:18(字符合并 整数解析星期几) 最近,在论坛中,遇到了不少比较难的sql问题,虽然自己都能解决,但发现过几天后,就记不起来了,也忘记解决的方法了. 所以,觉得 ...

  6. JQuery 的优先级

    1.使用最新的jQuery版本 2.用对选择器.   2.1 jquery最快的选择器是ID选择器:来源于js的getElementById()方法 注释:需要选择多个元素,必然涉及到Dom遍历和循环 ...

  7. .NET Standards

    .net的创始者们在一开始的时候,就意识到了他们的编程技术可以用在不通的操作系统和不同类型的cpu上.他们改进了20世纪90年代编程语言实现技术.最主要的一条是,不同的编程语言对应统一个运行时,及CL ...

  8. 依赖: libcheese-gtk23 (>= 3.4.0)

    unity-control-center : 依赖: libcheese-gtk23 (>= 3.4.0) 但是它将不会被安装                         依赖: libch ...

  9. python列表操作大全

    Python列表操作大全 对于python列表的理解可以和C语言里面的数组进行比较性的记忆与对照,它们比较相似,对于python里面列表的定义可以直接用方括号里加所包含对象的方法,并且python的列 ...

  10. rem em min-width: 30em 的意思

    30em=30rem=30x16px=480px @media only screen and (min-width:30 em){ }