js加载读取内容及显示与隐藏div示例

代码如下:

<head>
<script>
function check(){

var num = document.getElementById("choose").value;
alert(num);
if(num=="4"){
document.getElementById("show").style.display="block";
}else{
document.getElementById("show").style.display="none";
}
}
</script>
</head>
<body onload="check()">

<select id="choose" onchange="check()">
<option value="1">第一</option>
<option value="2">第二</option>
<option value="3">第三</option>
<option value="4">第四</option>
</select>

<div id="show" style="display:none;">
<table>
<tr>
<td>有志者，事竟成</td>
<td>苦心人，天不负</td>
</tr>
</table>
</div>
</body>

赞 (0)

相关推荐

  • JS/jQuery实现默认显示部分文字点击按钮显示全部内容

    复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>JS实现默认显示部分文字,点击按钮显示全部</title> </head> <body> <div id="box"> <h2>民间机构提前3天预报大理地震 地震局称违法</h2> <p&g

  • javascript实现的鼠标悬停时动态翻滚的导航条

    动态翻滚的导航条 .clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden}.clear{display:inline-block}.clear{display:block} div#nav{height:32px; background:url(http://files.jb51.net/demoimg/200911/YL29.jpg) repeat-x} div#nav ul{

  • 一个简单的JS鼠标悬停特效具体方法

    首先,需加载jquery库(略过). 其次,将下面 Javascript代码加到页面的头部:  复制代码 代码如下: <script type='text/javascript'>    jQuery(document).ready(function($){    $('a').hover(function()    {    $(this).stop().animate({'left': '5px'}, 'fast');    }, function() {    $(this).stop(

  • js简单实现让文本框内容逐个字的显示出来

    复制代码 代码如下: <script language="JavaScript"> <!-- function MArray() { this.length = MArray.arguments.length for (var i = 0; i < this.length; i++) this[i+1] = MArray.arguments[i]} var fArray = new MArray; fArray[0]="欢迎大家学习javascript

  • Javascript仿新浪游戏频道鼠标悬停显示子菜单效果

    Javascript仿新浪游戏频道鼠标悬停显示子菜单效果

    本文实例讲述了Javascript仿新浪游戏频道鼠标悬停显示子菜单效果,分享给大家供大家参考.具体如下: 这里演示使用JS实现的网页栏目分类菜单,从新浪游戏频道扣下来的,操作方式类似于滑动门的效果,鼠标无需点击,只需把鼠标放在一级主菜单上,就可显示出二级分类菜单,这弹出的这个二级菜单中,实际上又重新进行了分类,可以说整体上,这是一款支持三级分类的网站菜单,目前新浪游戏还在用的效果哦. 先来看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-gam

  • js实现鼠标悬停图片上时滚动文字说明的方法

    本文实例讲述了js实现鼠标悬停图片上时滚动文字说明的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js实现鼠标悬停图片上时的滚动文字说明</title> <body> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function showtip2(current,e,text){   if (document.all&&a

  • 基于JS代码实现当鼠标悬停表格上显示这一格的全部内容

    想实现这样一个功能,就是在一个表格中,由于很多字过多,所以用文字溢出的方法处理了,但是这样就无法看到表格中具体的内容呢.想实现当鼠标移上去的时候可以显示这一行被隐藏的内容.当然这个网上有很多插件,但是我没有用,还是自己写了一个. css部分 <style> #showbox { width: 150px; min-height: 50px; font: 100 14px/1 "微软雅黑"; border: 1px solid #3c8dbc; display: none;

  • js分页显示div的内容

    div分页显示_我们_www.jb51.net #frameContent{ width:500px; /*调整显示区的宽*/ height:200px; /*调整显示区的高*/ font-size:14px; line-height:20px; border:1px solid #000000; overflow-pageINdex:hidden; overflow-y:hidden; word-break:break-all; } a{ font-size:12px; color:#0000

  • js加载读取内容及显示与隐藏div示例

    复制代码 代码如下: <head> <script> function check(){ var num = document.getElementById("choose").value; alert(num); if(num=="4"){ document.getElementById("show").style.display="block"; }else{ document.getElement

  • 无阻塞加载js,防止因js加载不了影响页面显示的问题

    浏览器加载静态资源和js的方式都是线性加载,所以一般情况可以将js放到</body>前,防止UI线程的阻塞. 而某些时候我们既希望js在整个网页的头部就加载,又担心js阻塞导致网站加载缓慢,就可以用到无阻塞加载js技术. Dynamic Script Elements 动态脚本元素 DOM允许我们使用Javascript动态创建HTML的几乎所有文档内容,一个新的<script>元素可以非常容易的通过标准DOM创建: var script = document.createElem

  • vue.js加载新的内容(实例代码)

    vue是一种轻巧便捷的框架,那么如何进行对于数据加载的刷新呢?以下就是我对于vue.js数据加载的一点想法 源码: <div @scroll="onScroll($event)" style="height: 100%;overflow: auto;"> <ul class="shop-brand-index" v-show="sitems.length > 0" > <li v-for=&

  • php+ajax+jquery实现点击加载更多内容

    我们在一些微博网站上可以碰到这样的应用,微博内容列表没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文我将结合jQuery和PHP给大家讲述如何实现这种应用. 基本原理:页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"更多"链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作出相应,获取数据库相应的记录

  • jQuery+PHP+ajax实现微博加载更多内容列表功能

    在一些微博网站上我们经常可以看到这样的应用,微博内容列表上并没有使用分页条,而是一次加载一定数量的记录显示在列表页,当用户浏览到列表页底部时,可以通过单击"查看更多"来加载更多记录.本文将结合jQuery和PHP给大家讲述如何实现这种功能. Ajax加载的基本原理:当页面载入时,jQuery向后台请求数据,PHP通过查询数据库将最新的几条记录显示在列表页,在列表页的底部有个"查看更多"的链接,通过触发该链接,向服务端发送Ajax请求,后台PHP程序得到请求参数,并作

  • JS 加载性能Tree Shaking优化详解

    目录 正文 什么是 Tree Shaking 寻找 Tree Shaking 的机会 防止 Babel 将 ES6 模块转换为 CommonJS 模块 留意 side effects 只导入你需要的 更复杂的情况 总结 正文 随着 web 应用复杂性增加,JS 代码文件的大小也在不断的攀升,截住 2021年9月,在 httparchive 上有统计显示——在移动设备上 JS 传输大小大约为 447 KB,桌面端 JS 传输大小大约为 495 KB,注意这仅仅是在网络中传输的 JS 文件大小,JS

  • require.js 加载 vue组件 r.js 合并压缩的实例

    require.js 加载 vue组件 r.js 合并压缩的实例

    准备: vue.js 原本是学习vue组件 require.js 然后想到用require 加载 r.js 文件太多 合并 文件目录 忽略部分文件及文件夹 一.先说vue 组件 先引入vue 再引入vue组件 Vue.extend({}) 定义组件 template data methods Vue.component(),注册组件的标签,标签在html中是一个挂载点 new Vue() 进行实例化 index.html // css引入 略 <div id="header"&g

  • JS加载iFrame出现空白问题的解决办法

    在使用IE6浏览器开发过程中出现各种奇葩问题,非常棘手,费劲脑汁终于问题解决.特此把我的问题描述及解决办法分享到我们平台,帮助那些遇到此问题的朋友. 1.js加载iframe出现空白 iframeID 是加载的 Iframe ID号,修改成自己用的即可. <iframe name="frames" id="iframeID" src=""/> setTimeout("document.frames['"+ifram

  • jQuery Ajax 加载数据时异步显示加载动画

    jQuery Ajax 加载数据时异步显示加载动画

    ajax加载后台数据就不说的那么细了. 看下面代码首先前台上放置代码 <div id="loadgif" style="width:66px;height:66px;position:absolute;top:50%;left:50%;"> <img alt="加载中..." src="../../Images/loading1.gif"/> </div> 在js脚本文件中首先把这个图片动画

  • jQuery实现根据滚动条位置加载相应内容功能

    jQuery实现根据滚动条位置加载相应内容功能

    实现jQuery根据滚动条位置加载相应的内容:向下滚动时当内容区域滚动到可视窗口高度的一半时,加载动画内容:向上滚动到相应的内容区域时也重新加载动画内容! 1.实现思路: 先静态布局好HTML结构,使用伪类:hover模拟动画效果,再使用jQuery 控制动画类名的切换来实现效果!主要判断滚动的方向,以及相应方向上加载动画的时机(即何时才加载动画的判断条件!关键点!). 2.思维草稿图: 向下滚动加载动画判断条件:(代码中addClass()函数) 向上滚动加载动画判断条件:(代码中addCla

随机推荐