javascript的tab切换原理与效果实现方法


Posted in Javascript onJanuary 10, 2015

本文实例讲述了javascript的tab切换原理与效果实现方法。分享给大家供大家参考。

具体实现方法如下:

<html>

<head>

<style type="text/css">

#container{border:solid 1px green;width:300px;height:300px;}

li{float:left;margin-left:20px;}

p{float:left;}

#sports,#military,#bbs{display:none;}

</style>

<script type="text/javascript">

function tab(pid){

 var ps = ['news','sports','military','bbs'];

 for(var i=0,len=ps.length;i<len;i++){

  if(ps[i] == pid){

   document.getElementById(ps[i]).style.display = "block";

  }else{

   document.getElementById(ps[i]).style.display = "none";

  }

 }

}

</script>

</head>

<body>

<div id="container">

 <ul>

  <li onmouseover="tab('news');">新闻</li>

  <li onmouseover="tab('sports');">体育</li>

  <li onmouseover="tab('military');">军事</li>

  <li onmouseover="tab('bbs');">论坛</li>

 </ul>

 <p id="news">新闻新闻新闻新闻新闻</p>

 <p id="sports">体育体育体育体育体育</p>

 <p id="military">军事军事军事军事军事</p>

 <p id="bbs">论坛论坛论坛论坛论坛</p>

</div>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
解决vue项目本地启动时无法携带cookie的问题
Feb 06 Vue.js
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 #Javascript
js中键盘事件实例简析
Jan 10 #Javascript
js中this的用法实例分析
Jan 10 #Javascript
js创建对象的方式总结
Jan 10 #Javascript
js对象继承之原型链继承实例
Jan 10 #Javascript
js对象的复制继承实例
Jan 10 #Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 #Javascript
You might like
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
PHP判断远程图片是否存在的几种方法
2014/05/04 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
解决php extension 加载顺序问题
2019/08/16 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
JS中不为人知的五种声明Number的方式简要概述
2013/02/22 Javascript
解决IE6的PNG透明JS插件使用介绍
2013/04/17 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
微信小程序checkbox组件使用详解
2018/01/31 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
python正则表达式及使用正则表达式的例子
2018/01/22 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
谈谈Python中的while循环语句
2019/03/10 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
Weblogc domain问题
2014/01/27 面试题
企业治理工作自我评价
2013/09/26 职场文书
大学生学习党课思想汇报
2014/01/03 职场文书
人民教师求职自荐信
2014/03/12 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
初中政治教师教学反思
2016/02/23 职场文书