点击什么显示什么的内容

<div style="width:200px; height:40px">
<div class="yiji" style="background-color:red;" onclick="Show('g')">公告</div>
<div class="yiji" style="background-color:#F96;" onclick="Show('x')">新闻</div>
</div> <div class="erji" id="g" style="background-color:red">
<span>wwwwwwwwwwwwwwwww</span>
<span>wwwwwwwwwwwwwwwww</span>
<span>wwwwwwwwwwwwwwwww</span>
<span>wwwwwwwwwwwwwwwww</span>
</div>
<div class="erji" id="x" style="background-color:#F96; display:none;">
<span>ddddddddddd</span>
<span>ddddd</span>
<span>sss</span>
</div>

css

*{
margin:0px auto;
padding:0px;
}
.yiji{
width:100px;
height:40px;
float:left;
text-align:center;
line-height:40px;
vertical-align:middle;
}
.erji{
width:200px;
height:200px;
}

js

function Show(a)
{
var a = document.getElementById(a);
var e = document.getElementsByClassName("erji");
//回复原样
for(var i=0;i<e.length;i++)
{
e[i].style.display = "none";
}
a.style.display = "block"; }

二、进度条

<div id="kuang">
<div id="jindu" style="width:0px;"></div>
</div>

css

#kuang{
width:500px;
height:20px;
border:1px solid #999;
}
#jindu{ height:20px;
background-color:#3F0;
float:left;
}

js

Zou();
window.setInterval("Zou()",20);
function Zou()
{
var j = document.getElementById("jindu");
//获取元素的长
var str = j.style.width;
//获取宽度里的数字
var cd = str.substr(0,str.length-2);
if(cd<500)
{ cd = parseInt(cd)+2;
j.style.width = cd+"px";
}
}

js点击什么显示什么的内容,隐藏其它和进度条的更多相关文章

  1. JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习

    JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onc ...

  2. js点击更多显示更多内容效果

    我写了一个简单的分段显示插件,用法很简单:1,把你要分面显示的内容的容器元素增加一个class=showMoreNChildren,并增加一个自定义属性pagesize="8" 这 ...

  3. js 点击按钮显示下拉菜单

    <li> <a id = "rank" onclick="showGroup()"></a></li><l ...

  4. js点击图片显示在左边大图

    <div class="imgbox cf">    <img src="temp/pic2.jpg" alt="" cl ...

  5. SAP(ABAP) 显示等待图标的FM:SAPGUI_PROGRESS_INDICATOR-SAP进度条

    在执行一些数据量大的报表时候,为了防止用户认为是死机,可以再程序中添加正在处理的图标,可以CALL一个 FM来实现. CALL FUNCTION 'SAPGUI_PROGRESS_INDICATOR' ...

  6. Ubuntu 16.04在启动和关机时不显示启动和关机画面且显示详细的命令信息,没有进度条和Logo,或者只有紫色界面,或者没有开机画面等问题解决

    主要有以下解决方法: 1.如果之前配置过Grub来显示详细的命令信息的,那么改回去就行了,参考:http://www.cnblogs.com/EasonJim/p/7129873.html,通过这种方 ...

  7. 轻量级进度条 – Nprogress.js

    进度条库是前端中常见的库之一,bootstrap中提供了多种进度条样式.NProgress.js和nanobar.js是两款轻量级的进度条组件,使用简便. 官网: NProgress.js:http: ...

  8. Ajax上传文件进度条显示

    要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...

  9. JS点击显示隐藏内容

    JS点击显示隐藏密码 思路:获取元素,判断点击,如果DIV显示就隐藏,如果DIV隐藏就显示出来. 1 if(DIV是显示的){ 2 div.style.display='none'; 3 } 4 el ...

随机推荐

  1. 网络编程-Mysql-1、数据库的启动关闭,创建数据库,表等基本操作

    启动服务端:sudo service mysql start 关闭服务端:suodo service mysql stop 重启服务端:suodo service mysql restart 连接数据 ...

  2. Ubuntu14.0使用gparted调整分区大小

    不知道为什么,我总会碰到一些疑难杂症,别人的分区都是在同一个目录下,直接通过,不断调整同一目录下相邻分区之间的空间来达到调整目标分区大小的目的 但我的不一样,我的主要分区在扩展分区下,极其魔性,图片里 ...

  3. (三)ajax请求不同源之nginx反向代理跨域

    一.基本原理 nginx是一个高性能的web服务器,常用作反向代理服务器.nginx作为反向代理服务器,就是把http请求转发到另一个或者一些服务器上. 用nginx反向代理实现跨域,是最简单的跨域方 ...

  4. CentOS下安装yum源的流程和操作

    一般公司都用Linux来搭建服务器,Linux安装软件时能够用yum安装依赖包是一件非常简单而幸福的事情,因为你只需一个简单的安装命令yum install []即可安装相应的软件,yum工具会自动的 ...

  5. 如果往错误的NEO地址转账会发生什么

    昨天聊天有人用NEO往错误地址转账丢钱了 我的第一反应是这不可能   Neo使用的地址带有验证功能 最下面ARPP-.G6ce这一串是个base58编码 把他解开就是17-.151f7b5f这一串 红 ...

  6. java线程系列之三(线程协作)

    本文来自:高爽|Coder,原文地址:http://blog.csdn.net/ghsau/article/details/7433673,转载请注明. 上一篇讲述了线程的互斥(同步),但是在很多情况 ...

  7. Windows系统IntelliJ IDEA安装配置

    IntelliJ IDEA安装 IntelliJ IDEA,是java编程语言开发的集成环境,业界公认的最好的Java开发IDE之一.打开IDEA官方网站https://www.jetbrains.c ...

  8. Windows 主机名映射地址

    在开发中大数据集群中我们自己的电脑主机名映射不到集群的主机名下面我们就去修改自己电脑 主机名映射地址 c/Windows/System32/drivers/etc/host   文件将主机名和IP地址 ...

  9. Python 学习笔记8 循环语句 while

    While循环是哟中利用条件语句,不断的执行某一段代码块,达到批量操作输出等一系列的操作,直到条件不满足或者被强制退出为止. 其工作流程如下: (图片来源菜鸟教程:http://www.runoob. ...

  10. Python 学习笔记3 变量-数字

    我们来具体了解下有关 number类型的变量的使用方式和含义. 在Python中的Number类型的变量包含以下几种: int: 通常我们所说的整数, 比如 1, 2 ,3 ,100, 3000 等等 ...