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的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
jQuery阻止移动端遮罩层后页面滚动
Mar 15 Javascript
创建简单的node服务器实例(分享)
Jun 23 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
微信小程序如何调用图片接口API并居中显示
Jun 29 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中实现记住密码自动登录的代码
2011/03/02 PHP
简单的php文件上传(实例)
2013/10/27 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
javascript入门·对象属性方法大总结
2007/10/01 Javascript
javascript eval和JSON之间的联系
2009/12/31 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
Javascript根据指定下标或对象删除数组元素
2012/12/21 Javascript
$.getJSON在IE下失效的原因分析及解决方法
2013/06/16 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
JS与SQL方式随机生成高强度密码示例
2018/12/29 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
Python实现Linux命令xxd -i功能
2016/03/06 Python
Java及python正则表达式详解
2017/12/27 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
Python序列类型的打包和解包实例
2019/12/21 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
致400米运动员广播稿
2014/02/07 职场文书
现实表现材料范文
2014/12/23 职场文书
化妆品促销活动总结
2015/05/07 职场文书
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android