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 相关文章推荐
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
Vuex之理解Mutations的用法实例
Apr 19 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 Javascript
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
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
php实现文件下载代码分享
2014/08/19 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
php获取从百度、谷歌等搜索引擎进入网站关键词的方法
2015/07/08 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
vue项目部署到nginx/tomcat服务器的实现
2019/08/26 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
Python eval函数原理及用法解析
2020/11/14 Python
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
重阳节标语大全
2014/10/07 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
记一次Mysql不走日期字段索引的原因小结
2021/10/24 MySQL
SQL注入详解及防范方法
2021/12/06 MySQL