JS实现同一个网页布局滑动门和TAB选项卡实例


Posted in Javascript onSeptember 23, 2015

本文实例讲述了JS实现同一个网页布局滑动门和TAB选项卡。分享给大家供大家参考。具体如下:

这里演示同一个网页布局滑动门和TAB选项卡效果,其实滑动门和选项卡没有太大的区别,无非是鼠标动作的不同而已,但是有时候在同一个网页中布局两个以上的选项卡,总容易产生混乱,导致JS出错,如果你需要这样做,那么就请参考本实例,帮你解决这个问题。

运行效果截图如下:

JS实现同一个网页布局滑动门和TAB选项卡实例

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>修正版的网页Tab滑动门</title>
<style>
*{margin:0;padding:0;}
body{margin:50px;font-size:12px;color:#666;}
li{list-style:none;}
.list{width:378px;height:100px;padding:10px;font-size:14px;line-height:24px;border:1px #cfedff solid;border-top:0;}
.tab{width:398px;height:34px;border:1px #cfedff solid;border-bottom:0;background:url(images/title.gif) repeat-x;}
.tab ul{margin:0;padding:0;}
.tab li{float:left;padding:0 30px;height:34px;line-height:34px;text-align:center;border-right:1px #ebf7ff solid;cursor:pointer;}
.tab li.now{color:#5299c4;background:#fff;font-weight:bold;}
.block{display:block;}
</style>
<script type="text/javascript">
function setTab(name,num,n){
  for(i=1;i<=n;i++){
    var menu=document.getElementById(name+i);
    var con=document.getElementById(name+"_"+"con"+i);
    menu.className=i==num?"now":"";
     con.style.display=i==num?"block":"none"; 
  }
}
</script>
</head>
<body>
<h1>TAB切换onMouse</h1>
 <div class="tab">
  <ul>
   <li id="one1" onmouseover="setTab('one',1,4)" class="now">儒家</li>
   <li id="one2" onmouseover="setTab('one',2,4)">法家</li>
   <li id="one3" onmouseover="setTab('one',3,4)">墨家</li>
   <li id="one4" onmouseover="setTab('one',4,4)">道家</li>
  </ul>
 </div>
 <div class="list">
  <div id="one_con1">
    <div style="background:#333;"><span>儒家,代表人物为孔丘、孟轲,代表作《春秋》、《论语》、《孟子》。 </span></div>
  </div>
  <div id="one_con2" style="display:none;">
    <div style="background:#ff0;"><span>法家,代表人物韩非、李斯、管仲、商鞅,代表作《韩非子》、《管子》。 </span></div>
  </div>
  <div id="one_con3" style="display:none;">
   <div style="background:#f00;"><span>墨家,代表人物墨翟,代表作《墨子》。 </span></div>
  </div>
  <div id="one_con4" style="display:none;">
   <div style="background:#e45;"><span>道家,代表人物李耳、庄周,代表作《老子》、《庄子》。 </span></div>
  </div>
 </div>
 <br /><br /><br />
<h1>TAB切换onClick</h1>
 <div class="tab">
  <ul>
   <li id="two1" onclick="setTab('two',1,4)" class="now">儒家</li>
   <li id="two2" onclick="setTab('two',2,4)">法家</li>
   <li id="two3" onclick="setTab('two',3,4)">墨家</li>
   <li id="two4" onclick="setTab('two',4,4)">道家</li>
  </ul>
 </div>
 <div class="list">
  <div id="two_con1">
    <div style="background:#333;"><span>儒家,代表人物为孔丘、孟轲,代表作《春秋》、《论语》、《孟子》。 </span></div>
  </div>
  <div id="two_con2" style="display:none;">
    <div style="background:#ff0;"><span>法家,代表人物韩非、李斯、管仲、商鞅,代表作《韩非子》、《管子》。 </span></div>
  </div>
  <div id="two_con3" style="display:none;">
   <div style="background:#f00;"><span>墨家,代表人物墨翟,代表作《墨子》。 </span></div>
  </div>
  <div id="two_con4" style="display:none;">
   <div style="background:#e45;"><span>道家,代表人物李耳、庄周,代表作《老子》、《庄子》。 </span></div>
  </div>
 </div>
</body>
</html>

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

Javascript 相关文章推荐
基于jquery的一个简单的脚本验证插件
Apr 05 Javascript
JQuery live函数
Dec 24 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
JavaScript 实现类的多种方法实例
May 01 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
使用grunt合并压缩js和css文件的方法
Mar 02 Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 Javascript
React配置子路由的实现
Jun 03 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 #Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 #Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 #Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 #Javascript
jQuery实现的经典滑动门效果
Sep 22 #Javascript
jquery实现的简单二级菜单效果代码
Sep 22 #Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 #Javascript
You might like
PHP5 安装方法
2007/01/15 PHP
php md5下16位和32位的实现代码
2008/04/09 PHP
PHP is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
PHP获取当前完整URL地址的函数
2014/12/21 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
PHP实现对数组分页处理实例详解
2017/02/07 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
学习ExtJS form布局
2009/10/08 Javascript
jquery自定义下拉列表示例
2014/04/25 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
bootstrap组件之按钮式下拉菜单小结
2017/01/19 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
python地震数据可视化详解
2019/06/18 Python
Python中常用的os操作汇总
2020/11/05 Python
python 制作网站小说下载器
2021/02/20 Python
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
阿巴庭院:Abba Patio
2019/06/18 全球购物
给校长的建议书300字
2014/05/16 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
商超业务员岗位职责
2015/02/13 职场文书
情侣之间的道歉短信
2015/05/12 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
oracle重置序列从0开始递增1
2022/02/28 Oracle