js 多层叠的TAB选项卡

HTML：多个导航tag加一个放置默认内容div
脚本：以数组的形式给出每个导航对应的html

多层叠TAB选项卡

.nonstop { width:168px; font-size:12px;margin:auto; border:1px solid #cdcdcd; padding:2px; overflow:hidden; }
.nonstop span { float:left;_display:inline; cursor:pointer; width:22px; height:14px; background:#cdcdcd url(./img/button.gif) no-repeat -175px top; font-size:10px; line-height:14px; margin:2px 0 0 2px; display:inline; text-align:center; }
.nonstop span:hover { background:gray; font-weight:bold }
.nonstop div { height:300px; clear:both; border:1px solid #cdcdcd; border-width:2px 1px; margin-left:2px; overflow:hidden; }
.nonstop div a { float:left; width:80px; height:40px; background:white; text-align:center; line-height:40px; padding-top:8px; margin:1px 0 0 1px; }
.nonstop div a img { border:0; }
.nonstop span.hot { border:1px solid red; width:20px; color:white; height:15px; background:red url(./img/button.gif) no-repeat -175px -14px; font-weight:bold; border-bottom:none; }

一个多层叠的TAB选项卡，自适应宽度(自行更改nonstop的width测试效果)。
HTML：多个导航tag加一个放置默认内容div
脚本：以数组的形式给出每个导航对应的html

ABCDEFG
HI JMLNO
PSTUYZ!

这里放一些默认内容

1

1

1

1

1

1

1

1

//20个字母下的品牌，不包含默认显示的内容
var contHtml = ['a1','b2','c3','d4','e5','f6','g7','h21','i22','j23','m24','l25','n26','o27','p11','s12','t13','u14','y15','z16'];
var a2zBox = document.getElementById("a2zbox");
var a2zTag = a2zBox.getElementsByTagName("span");
var a2zCont = a2zBox.getElementsByTagName("div")[0];
var divs = [],colN=Math.floor(a2zCont.clientWidth/(a2zTag[0].clientWidth))//7;
for(var n=1; n

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • JS实现简单的tab切换选项卡效果

    JS实现简单的tab切换选项卡效果

    本文实例讲述了JS实现简单的tab切换选项卡效果.分享给大家供大家参考,具体如下: <!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"> <m

  • JS实现图文并茂的tab选项卡效果示例【附demo源码下载】

    JS实现图文并茂的tab选项卡效果示例【附demo源码下载】

    本文实例讲述了JS实现图文并茂的tab选项卡效果.分享给大家供大家参考,具体如下: <!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"> <h

  • 跨浏览器通用、可重用的选项卡tab切换js代码

    由于近来学了点js,于是我装逼道...不太难吧...就切一下display属性?同学无视我..说要搞个通用的...什么还要跟ajax交互..???我愣是没有听懂...到底要搞什么...权当作练手,我自己胡弄了一个. 需求:同学口中的通用我不知道神马意思...那我就按自己的理解吧.. ①跨浏览器,IE6+,FF,Chrome,Safari,Opera ②同一个页面可以用同一个js设置不同的选项卡. 说太多没啥米用,来看代码吧. 一.html部分(其实这还没啥好看的,设置了三个,前两个是一样的,通过

  • 原生js实现tab选项卡切换

    原生js实现tab选项卡切换

    本文实例为大家分享了原生js实现tab选项卡切换效果的代码,供大家参考,具体内容如下 1.html部分  <body> <div id="tab"> <div class="tab_menu"> <ul> <li class="selected"><a href="#">时事</a></li> <li><a hre

  • JS+CSS实现的经典tab选项卡效果代码

    JS+CSS实现的经典tab选项卡效果代码

    本文实例讲述了JS+CSS实现的经典tab选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款经典的JavaScript+CSS tab选项卡代码,由以前的一款改写而成,自认为不错的东西,发上来分享吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio

  • javascript实现tabs选项卡切换效果(自写原生js)

    javascript实现tabs选项卡切换效果(自写原生js)

    现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果.今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出. 效果图如下:  html代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</

  • JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)

    JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)

    本文实例讲述了JS实现滑动菜单效果代码.分享给大家供大家参考.具体如下: 这里实现一个特效将网页中的选项卡滑动门都集中到一个网页中来,有些同志曾经为同一个页面布置两个滑动门而烦恼,参考一下本例子,相信你会找到答案,而且有各种排列方式的选项卡,总有一款会满足你. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-move-tab-nav-menu-demo-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

  • javascript实现tabs选项卡切换效果(扩展版)

    前段时间写了个tabs 选项卡切换效果,今天抽空在原有的基础上进行了扩展,加入了自动轮播,这样就变成了类似图片轮播的效果了. html 代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</title> <link rel="styleshe

  • js实现tab选项卡函数代码

    * { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font-size: 12px; padding-top: 0px; } BODY { padding-left: 20px; padding-top: 20px; } .wid240 { width: 242px; margin-bottom: 20px; } .wid180 { width: 182px; } .tab { border-b

  • Javascript 自适应高度的Tab选项卡

    JS部分具体的代码如下: 复制代码 代码如下: var getSiblingNode=function(className,elAr,el,not){ className=" "+className+" "; var Arr=[]; for(var i=0,l=elAr.length;i<l;i++){ if(elAr[i]!=el&&(elAr[i].nodeType===1)&&(" "+elAr[i].

  • JS实现的最简Table选项卡效果

    JS实现的最简Table选项卡效果

    本文实例讲述了JS实现的最简Table选项卡效果.分享给大家供大家参考.具体如下: 这是一款最简易的Table选项卡,是基于Table表格的,非DIV结构,习惯表格的朋友可能会喜欢本选项卡,部分修饰仍然用的是Table,比如表格边框.背景颜色等,个人感觉好像用Table比用DIV结构代码更精简一些. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-z-simple-tab-nav-menu-codes/ 具体代码如下: <html> &l

  • JS封装的选项卡TAB切换效果示例

    JS封装的选项卡TAB切换效果示例

    本文实例讲述了JS封装的选项卡TAB切换效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>JS封装的选项卡TAB代码</title> <style type="text/css"> *{ padding:0; margin:0;}

  • 纯php打造的tab选项卡效果代码(不用js)

    1.根据get判断,获取get生成css 复制代码 代码如下: <style type="text/css"> <?php if(!isset($_GET['city_id'])) { $city_id = 12; } else { $city_id = $_GET['city_id']; } echo '.a'.$city_id.' { color:red; } '; for($i=12;$i<=16;$i++) { if($i != $city_id) {

随机推荐