JS实现完全语义化的网页选项卡效果代码


Posted in Javascript onSeptember 15, 2015

本文实例讲述了JS实现完全语义化的网页选项卡效果代码。分享给大家供大家参考。具体如下:

这是一款完全语义化的JS网页选项卡,包括了两种用法,一种是点击式,另一种是滑动门式,具体用哪一种要根据你自己的需要了,滑动门是在鼠标经过时触发,选项卡则是需要鼠标点击的。

运行效果截图如下:

JS实现完全语义化的网页选项卡效果代码

在线演示地址如下:

具体代码如下:

<!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>
<title>语义化的网页选项卡</title>
<style type="text/css">
 *{margin:0;padding:0;font-size:13px;line-height:1.5;}
 body{padding:20px;}
 .cur{color:#f60;border-bottom:1px solid #fff;font-weight:bold;background:#fff;cursor:default;}
 #tab_,dl{position:relative;float:left;height:100px;width:300px;}
 h4,dt{float:left;height:20px;margin:0 0 0 8px;display:inline;line-height:20px;width:60px;border:1px solid #ccc;position:relative;z-index:11;text-align:center;font-weight:normal;cursor:pointer;background:#eee;}
 .c,dd{position:absolute;top:21px;border:1px solid #ccc;left:0;width:250px;padding:20px;overflow:hidden;display:block;}
 #tab_{clear:left;}
 h1{clear:left;padding:10px 0}
 #tab_1.cur{color:#f60}
 #tab_2.cur{color:blue}
 #tab_3.cur{color:green}
</style>
</head>
<body>
<h1>mouseover</h1>
<dl id="tab">
 <dt>美国</dt>
 <dd>我都不怕</dd>
 <dt>朝鲜</dt>
 <dd>谁都怕我</dd>
 <dt>某国</dt>
 <dd>我谁都怕</dd>
</dl>
<h1>click</h1>
<div id="tab_">
 <h4>orange</h4>
 <div class="c">桔红</div>
 <h4>blue</h4>
 <div class="c">蓝色</div>
 <h4>green</h4>
 <div class="c">绿色</div>
</div>
<script type="text/javascript">
function id(elem) {return document.getElementById(elem)}
function show(elem) {elem.style.display = "";}
function hide(elem) {elem.style.display = "none";}
function next( elem ) {
 do {
 elem = elem.nextSibling;
 } while ( elem && elem.nodeType != 1 );
 return elem;
}
function tab(a, p) {
 var p = (p === undefined) ? {e:"onclick",n:1} : p,
  node = id(a).firstChild,
  x = [];
 p.e = (p.e === undefined) ? "onclick" : p.e;
 p.n = (p.n === undefined) ? 1 : p.n;
 node=(node.nodeType !== 1)?next(node):node;
 for (var i = 1, node; node; i++, node = next(node)) {
  x[i] = node;
 }
 for (var i = 1; x[i]; i++) {
  if(i % 2 == 0){hide(x[i]);x[i-1].id=a+(i/2)}
  x[p.n*2-1].className = "cur";
  show(x[p.n*2]);
  temp = function (i) {
   if (i % 2 == 1) {
    x[i][p.e] = function () {
     for (var j = 1; x[j]; j++) {
      if (j % 2 == 0) {
       hide(x[j]);
       x[j-1].className = ""
      }
     }
     show(x[i+1]);
     x[i].className = "cur"
    }
   } else {
    return null
   }
  }(i)
 }
}
tab("tab",{e:"onmouseover",n:2});
tab("tab_")
</script>
</body>
</html>

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

Javascript 相关文章推荐
jquery使用ajax实现微信自动回复插件
Apr 28 Javascript
JavaScript实现找出数组中最长的连续数字序列
Sep 03 Javascript
angularjs基础教程
Dec 25 Javascript
jQuery中insertBefore()方法用法实例
Jan 08 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 #Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 #Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 #Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 #Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 #Javascript
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 #Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 #Javascript
You might like
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
php图片缩放实现方法
2014/02/20 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
python实现随机密码字典生成器示例
2014/04/09 Python
python随机生成指定长度密码的方法
2015/04/04 Python
Python入门之modf()方法的使用
2015/05/15 Python
python黑魔法之参数传递
2016/02/12 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
python实现屏保计时器的示例代码
2018/08/08 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
如何在django中实现分页功能
2020/04/22 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
Python利用Faiss库实现ANN近邻搜索的方法详解
2020/08/03 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
班班通项目实施方案
2014/02/25 职场文书
网站美工岗位职责
2014/04/02 职场文书
个人考核材料
2014/05/15 职场文书
物流管理专业自荐信
2014/06/23 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
教师先进事迹材料
2014/12/16 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
趣味运动会简讯
2015/07/20 职场文书
WordPress多语言翻译插件 - WPML使用教程
2021/04/01 PHP
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis