本文实例讲述了JS实现完全语义化的网页选项卡效果代码。分享给大家供大家参考。具体如下:
这是一款完全语义化的JS网页选项卡,包括了两种用法,一种是点击式,另一种是滑动门式,具体用哪一种要根据你自己的需要了,滑动门是在鼠标经过时触发,选项卡则是需要鼠标点击的。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/js-yyh-web-tab-cha-nav-codes/
具体代码如下:
<!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程序设计有所帮助。
本文向大家介绍layui选项卡效果实现代码,包括了layui选项卡效果实现代码的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了layui选项卡的具体代码,供大家参考,具体内容如下 效果图: 官网Tab 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
本文向大家介绍JS实现自动定时切换的简洁网页选项卡效果,包括了JS实现自动定时切换的简洁网页选项卡效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS实现自动定时切换的简洁网页选项卡效果。分享给大家供大家参考。具体如下: 这是一款简洁人网页选项卡,与其它TAB不同的是,本选项卡是自动切换的,在变量里设定选项卡的内容、切换时间等,它就开始工作了,如果可以响应鼠标的动作就更完美了。 运行效
本文向大家介绍js/jQuery实现全选效果,包括了js/jQuery实现全选效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js/jQuery两种代码实现全选效果的具体代码,供大家参考,具体内容如下 注意点 在获取子选框的时候别加上 全选框的个数了 技巧 找 tbody 下面的input标签 就可以 jq文件夹自己下载即可 思路 以上就是本文的全部内容,希望对大家的学习有所帮助
本文向大家介绍js实现简洁的滑动门菜单(选项卡)效果代码,包括了js实现简洁的滑动门菜单(选项卡)效果代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现简洁的滑动门菜单。分享给大家供大家参考。具体如下: 一个简洁实用的网页选项卡菜单,在同一个页面中实现两个选项卡,第一个是滑动门,从布局上来说基本是相似的,第二个是选项卡,这里主要使用了Js自定义函数:tabMenu,函数功能:实现
本文向大家介绍js实现类似菜单风格的TAB选项卡效果代码,包括了js实现类似菜单风格的TAB选项卡效果代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现类似菜单风格的TAB选项卡效果代码。分享给大家供大家参考。具体如下: 这是一款基于javascript实现的一组简洁选项卡代码,类似菜单风格的TAB选项卡,没有使用图片,因此有些地方处理的还不太到位,不介意使用图片修饰的朋友可以再
本文向大家介绍微信开发 js实现tabs选项卡效果,包括了微信开发 js实现tabs选项卡效果的使用技巧和注意事项,需要的朋友参考一下 最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释。正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了。很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下。思