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 相关文章推荐
javascript TextArea动态显示剩余字符
Oct 22 Javascript
利用JQuery为搜索栏增加tag提示
Jun 22 Javascript
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
跟我学习javascript创建对象(类)的8种方法
Nov 20 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
AngularJS常见过滤器用法实例总结
Jul 06 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
Nov 27 jQuery
实现一个Vue自定义指令懒加载的方法示例
Jun 04 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
Zerg兵种介绍
2020/03/14 星际争霸
php jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
php内嵌函数用法实例
2015/03/20 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
JS动画效果代码3
2008/04/03 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
javascript动态添加样式(行内式/嵌入式/外链式等规则)
2013/06/24 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
实例分析编写vue组件方法
2019/02/12 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
python如何判断IP地址合法性
2020/04/05 Python
如何理解python中数字列表
2020/05/29 Python
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
创业计划书中包含的9个方面
2013/12/26 职场文书
团代会主持词
2014/04/02 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
年终考核实施方案
2014/05/26 职场文书
迎七一演讲稿
2014/09/12 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python