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 相关文章推荐
关于使用runtimeStyle属性问题讨论文章
Mar 08 Javascript
Javascript Object.extend
May 18 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
javascript列表框操作函数集合汇总
Nov 28 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
理解javascript中的闭包
Jan 11 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
Vue无限滑动周选择日期的组件的示例代码
Jul 18 Javascript
Vue 中axios配置实例详解
Jul 27 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 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中output_buffering
2015/07/13 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
浅析JavaScript动画
2015/06/10 Javascript
BootStrap实用代码片段之一
2016/03/22 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
Flask之flask-script模块使用
2018/07/26 Python
python中查看.db文件中表格的名字及表格中的字段操作
2020/07/07 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
Numpy中np.max的用法及np.maximum区别
2020/11/27 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
医学检验专业大学生求职信
2013/11/18 职场文书
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
《日月潭》教学反思
2014/02/28 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
阿甘正传观后感
2015/06/01 职场文书
酒店开业主持词
2015/07/02 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
python中的被动信息搜集
2021/04/29 Python