首页 >web前端 >js教程 >js 多层叠的TAB选项卡_javascript技巧

js 多层叠的TAB选项卡_javascript技巧

WBOY原创: 2016-05-16 18:35:481160浏览

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

<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <title>多层叠TAB选项卡</title> 
<style type="text/css"> 
.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; } 
</style> 
 
 
一个多层叠的TAB选项卡，自适应宽度(自行更改nonstop的width测试效果)。
HTML：多个导航tag加一个放置默认内容div
脚本：以数组的形式给出每个导航对应的html 
            <div class="nonstop" id="a2zbox">
 
                <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span><span>G</span> 
                <span>H</span><span>I</span>    <span>J</span><span>M</span><span>L</span><span>N</span><span>O</span> 
                <span>P</span><span>S</span><span>T</span><span>U</span><span>Y</span><span>Z</span><span>!</span> 
                <div>
 
                    这里放一些默认内容 
                    <p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1 
                </p>
</div> 
            </div> 
            <script type="text/javascript"> 
                //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<a2zTag.length/colN; n++){ 
                    divs[n-1] = document.createElement("div"); 
                    divs[n-1].style.display = "none"; 
                    a2zBox.insertBefore(divs[n-1],a2zTag[colN*n]); 
                } 
                divs.push(a2zCont); 
                var hotbox = divs.length-1;//初始内容div ID 
                var hotboxH = a2zCont.clientHeight; //内容div高度 
                var hotboxHtemp = hotboxH; 
                var time = 50, space = 100;//滑动速度 
                contHtml.push(a2zCont.innerHTML); 
                function TABS(T){ 
                    for( i=0; i<a2zTag.length; i++ ) 
                        //a2zTag[i].removeAttribute("class"); 
                        a2zTag[i].className=""; 
                    a2zTag[T].className = "hot"; 
                    var N=Math.ceil((T+1)/colN-1); 
                    divs[N].style.cssText = "display:block;border-color:red"; 
                    divs[N].innerHTML = contHtml[T]; 
                    if(N!=hotbox){ 
                        divs[N].style.height = 0; 
                        divs[hotbox].style.border = 0 ; 
                        var wane = setInterval(function(){ 
                            hotboxH -= space; 
                            divs[hotbox].style.height = hotboxH + "px"; 
                            divs[N].style.height = (hotboxHtemp - hotboxH ) + "px"; 
                            if(divs[hotbox].clientHeight < 1){ 
                                clearInterval(wane); 
                                divs[hotbox].style.cssText = "display:none"; 
                                hotbox=N; 
                                hotboxH = hotboxHtemp; 
                            } 
                        },time); 
                    } 
                } 
                Function.prototype.bind = function(){var __m = this; var arg = arguments; return function(){ __m.apply(window,arg); } } 
                for( i=0; i<a2zTag.length; i++ ) a2zTag[i].onclick = TABS.bind(i); 
            </script>

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

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：jquery中的sortable排序之后的保存状态的解决方法_jquery下一篇：php gethostbyname获取域名ip地址函数详解_javascript技巧

相关文章

查看更多