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写的一个DIV 弹出网页对话框
Aug 14 Javascript
过虑特殊字符输入的js代码
Aug 05 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
详解Node.js模板引擎Jade入门
Jan 19 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数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
PHP反射学习入门示例
2019/06/14 PHP
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
JS中递归函数
2016/06/17 Javascript
Angularjs 动态添加指令并绑定事件的方法
2017/04/13 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
Python实现配置文件备份的方法
2015/07/30 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
香港士多网上超级市场:Ztore
2021/01/09 全球购物
《油菜花开了》教学反思
2014/02/22 职场文书
《阳光》教学反思
2014/02/23 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
超市创业计划书
2014/09/15 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
实习单位意见
2015/06/04 职场文书
创业计划书之面包店
2019/09/17 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技