<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. Qt4 和 Qt5 模块的分类

    Qt5 与 Qt4 其中的一个区别是底层架构进行了改变,Qt5 引入了更加详细的模块化的概念,将众多功能细分到几个模块之中,Qt4 则是一种粗略的划分.本文主要对 Qt5 和 Qt4的模块进行一个简单 ...

  2. [Luogu5320][BJOI2019]堪破神机(DP+斯特林数)

    https://www.cnblogs.com/cjyyb/p/10747543.html 特征方程+斯特林反演化简式子,要注意在模998244353意义下5没有二次剩余,所以每个数都要用$a+b\s ...

  3. IDEA/WebStorm使用笔记

    1.使用powershell作为默认终端 #改变powershell策略 Set-ExecutionPolicy Unrestricted -Scope CurrentUser 找到系统的powers ...

  4. 一行代码实现Vue微信支付,无需引用wexin-sdk库,前后端分离HTML微信支付,无需引用任何库

    前后端分离项目实现微信支付的流程: 1:用户点击支付 2:请求服务端获取支付参数 3:客户端通过JS调起微信支付(微信打开的网页) * 本文主要解决的是第3步,视为前两步已经完成,能正确拿到支付参数, ...

  5. java 爬虫：开源java爬虫 swing工具 Imgraber

    1实现点: 1.返回给定URL网页内,所有图像url list 2.返回给定URL网页内,自动生成图像文件路径.txt 文件 3.返回给定URL网页内,下载txt文件指定的图片url,并将所有图像保存 ...

  6. Android Studio 生成 keystore 签名文件

    Android Studio 生成 keystore 签名文件 常见 SSL 证书格式 : .DER .CER,文件是二进制格式,只保存证书,不保存私钥. .PEM,一般是文本格式,可保存证书,可保存 ...

  7. 解决github提示安全漏洞的问题

    今天在提交代码的时候发现github提示了这样的错误: We found potential security vulnerabilities in your dependencies. Only t ...

  8. wampserver的使用配置

    1.正常安装就不说了,只需要把安装位置改成需要的位置就可以了.其它的默认就可以了. 2.安装完成之后打开wampserver. 3.现在该修改密码了: (1)点击进入mysql控制台. (2)Wamp ...

  9. CSS之属相相关

    一.padding与margin padding:就是内边距的意思,它是边框到内容之间的距离 另外padding的区域是有背景颜色的.并且背景颜色和内容的颜色一样.也就是说background-col ...

  10. Java springboot 中上传图片文件的1Md的限制

    在配置文件中修改了 spring.servlet.multipart.max-file-size=3.40spring.servlet.multipart.max-request-size=3M 遇到 ...