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 相关文章推荐
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
JavaScript通过prototype给对象定义属性用法实例
Mar 23 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
Javascript中神奇的this
Jan 20 Javascript
详解各版本React路由的跳转的方法
May 10 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 Javascript
gulp构建小程序的方法步骤
May 31 Javascript
node.js实现带进度条的多文件上传
Mar 27 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版
2006/10/09 PHP
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
javascript 获取网页标题代码实例
2014/01/22 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
VUE 实现滚动监听 导航栏置顶的方法
2018/09/11 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
2018/12/24 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
[02:04]2014DOTA2国际邀请赛 DK一个时代的落幕
2014/07/21 DOTA
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
售后服务承诺书模板
2014/05/21 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL