js点击什么显示什么的内容,隐藏其它和进度条
点击什么显示什么的内容
<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点击什么显示什么的内容,隐藏其它和进度条的更多相关文章
- JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习
JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onc ...
- js点击更多显示更多内容效果
我写了一个简单的分段显示插件,用法很简单:1,把你要分面显示的内容的容器元素增加一个class=showMoreNChildren,并增加一个自定义属性pagesize="8" 这 ...
- js 点击按钮显示下拉菜单
<li> <a id = "rank" onclick="showGroup()"></a></li><l ...
- js点击图片显示在左边大图
<div class="imgbox cf"> <img src="temp/pic2.jpg" alt="" cl ...
- SAP(ABAP) 显示等待图标的FM:SAPGUI_PROGRESS_INDICATOR-SAP进度条
在执行一些数据量大的报表时候,为了防止用户认为是死机,可以再程序中添加正在处理的图标,可以CALL一个 FM来实现. CALL FUNCTION 'SAPGUI_PROGRESS_INDICATOR' ...
- Ubuntu 16.04在启动和关机时不显示启动和关机画面且显示详细的命令信息,没有进度条和Logo,或者只有紫色界面,或者没有开机画面等问题解决
主要有以下解决方法: 1.如果之前配置过Grub来显示详细的命令信息的,那么改回去就行了,参考:http://www.cnblogs.com/EasonJim/p/7129873.html,通过这种方 ...
- 轻量级进度条 – Nprogress.js
进度条库是前端中常见的库之一,bootstrap中提供了多种进度条样式.NProgress.js和nanobar.js是两款轻量级的进度条组件,使用简便. 官网: NProgress.js:http: ...
- Ajax上传文件进度条显示
要实现进度条的显示,就要知道两个参数,上传的大小和总文件的大小 html5提供了一个上传过程事件,在上传过程中不断触发,然后用已上传的大 小/总大小,计算上传的百分比,然后用这个百分比控制div框的显 ...
- JS点击显示隐藏内容
JS点击显示隐藏密码 思路:获取元素,判断点击,如果DIV显示就隐藏,如果DIV隐藏就显示出来. 1 if(DIV是显示的){ 2 div.style.display='none'; 3 } 4 el ...
随机推荐
- 模拟select,隐藏下拉列表的几种实现
前言 平时开发过程中,出于各种原因模拟原生slect的要求并不算少见. 在实现的过程中,点击其他区域隐藏下拉列表,又是一个必备的功能, 最近在一次开发的过程中引发了点思考,做下总结. 现象 实际中的实 ...
- 初学Python的一些细节
一.python的数据类型 1.python的基本数据类型包括数值数据类型和字符串数据类型:基本数据类型的特点是不允许改变,如果改变基本数据类型的值,会导致内存的重新分配. int 整形 二进制 ...
- C#中new的三种用法
在 C# 中,new 关键字可用作运算符.修饰符或约束. 1)new 运算符:用于创建对象和调用构造函数. 2)new 修饰符:在用作修饰符时,new 关键字可以显式隐藏从基类继承的成员. 3)new ...
- 我的 FPGA 学习历程(04)—— 练习 verilog 硬件描述语言
这篇讲的是使用 verilog 硬件描述语言编写一个 3 - 8 译码器. 3 - 8 译码器是一个简单的组合逻辑,用于实现并转串,其输入输出关系如下: | 输入 | 输出 | -------- ...
- [TopCoder]棍子
题目描述 你有一堆棍子.每个木棒的长度是一个正整数. 你想要一组棍子所有的棍子都有相同的长度.您可以通过执行零个或多个步骤来更改当前集合.每个步骤必须如下所示: 你选择一根棍子.所选棒的长度必须至少为 ...
- Java课程寒假之《人月神话》有感之二
一.外科手术队伍 即建立一个合理的团队,按照书上的说法就是,在开发一个大的系统的时候,原本精英的团队就可能无法在较短的时间内完成一个大型的程序,在这样的条件下,必须扩大团队的规模,即使这个精英程序员的 ...
- vue引入外部.css文件,webpack将其与.vue中的样式混合打包了,怎么办?
我使用vue-cli搭自己的博客,希望引入公共样式: // main.js import './assets/styles/common.css' 我本来是希望webpack打包后,能将这个样式独立打 ...
- MySQL自动备份shell脚本
在数据库的日常维护工作中,除了保证业务的正常运行以外,就是要对数据库进行备份,以免造成数据库的丢失,从而给企业带来重大经济损失.通常备份可以按照备份时数据库状态分为热备和冷备,按照备份数据库文件的大小 ...
- Python Learning - One
## Create a directory each day, and can create files in the directory. 1. variable 2. comments 1) # ...
- vue 父组件给子组件传值,子组件给父组件传值
父组件如何给子组件传值 使用props 举个例子: 子组件:fromTest.vue,父组件 app.vue fromTest.vue <template> <h2>{{tit ...