Tab栏目切换效果

最新推荐文章于 2018-01-02 18:01:14 发布
最新推荐文章于 2018-01-02 18:01:14 发布
阅读量569 收藏
点赞数
分类专栏： 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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>非常好的tab栏目切换效果</title>

<style type="text/css">

*{margin:0;padding:0;border:0;list-style:none;}

body{background:#fff;padding:20px;font:1em Verdana, Geneva, sans-serif;}

.box{float:left;margin-right:20px; margin-left:100px;}

.box h4{color:#c00;line-height:30px;font-size:12px;}

.tip{border:1px solid #dedede;margin-top:20px;}

.tip p{height:30px;line-height:30px;padding-left:16px;background:#f1f1f1;}

.tip pre{background:##AFF8AB;}

.tip2{font-size:12px;color:#888;margin-top:16px;}

/*=========mF_tab--========*/

.mF_tab{width:426px;height:90px;}

.mF_tab .btn{position:absolute;top:0;left:0;z-index:2;}

.mF_tab .btn li{float:left;width:80px;height:26px;line-height:26px;text-align:center;margin-right:2px;border:1px solid #dedede;border-bottom:0;cursor:pointer;background:#f1f1f1;}

.mF_tab .btn li.current{height:27px;background:#fff;}

.mF_tab .cont{position:absolute;top:27px;left:0;border:1px solid #dedede;overflow:hidden;}

.mF_tab .cont .swt{position:absolute;left:0;top:0;}

.mF_tab .cont .swt li{float:left;}

.mF_tab .cont .swt li p{padding:16px;}

</style>

<script type="text/javascript">

/*

* myFocus焦点图基本库代码开始

*/

var myFocus={

        //myFocus JavaScript Library v1.0.0 beta

        //Design By Koen @ 2010.9.18

        //http://hi.baidu.com/koen_li

        $:function(id){return document.getElementById(id);},

        $$:function(tag,obj){return (typeof obj=='object'?obj:this.$(obj)).getElementsByTagName(tag);},

        $li:function(obj,n){return this.$$('li',this.$$('ul',obj)[n])},

        linear:function(t,b,c,d){return c*t/d + b;},

        easeIn:function(t,b,c,d){return c*(t/=d)*t*t*t + b;},

        easeOut:function(t,b,c,d){return -c*((t=t/d-1)*t*t*t - 1) + b;},

        easeInOut:function(t,b,c,d){return ((t/=d/2) < 1)?(c/2*t*t*t*t + b):(-c/2*((t-=2)*t*t*t - 2) + b);},

        style:function(obj,style){return (+[1,])?window.getComputedStyle(obj,null)[style]:obj.currentStyle[style];},//getStyle简化版

        opa:function(obj,v){//取得或设置对象透明度,默认100

                if(v!=undefined) {v=v>100?100:(v<0?0:v); obj.style.filter = "alpha(opacity=" + v + ")"; obj.style.opacity = (v / 100);}

                else return (!+[1,])?((obj.filters.alpha)?obj.filters.alpha.opacity:100):((obj.style.opacity)?obj.style.opacity*100:100);

        },

        animate:function(obj,prop,val,spd,type,fn){

                var opa=prop=='opacity'?true:false;

                if(opa&&obj.style.display=='none'){obj.style.display='';this.opa(obj,0);}

                var t=0,b=opa?this.opa(obj):parseInt(this.style(obj,prop)),c=val-b,d=spd||50,st=type||'easeOut',m=c>0?'ceil':'floor';

                if(obj[prop+'Timer']) clearInterval(obj[prop+'Timer']);

                obj[prop+'Timer']=setInterval(function(){

                        if(opa&&t<d){myFocus.opa(obj,Math[m](myFocus[st](++t,b,c,d)));}

                        else if(!opa&&t<d){obj.style[prop]=Math[m](myFocus[st](++t,b,c,d))+'px';}

                        else {if(opa&&val==0){obj.style.display='none'}clearInterval(obj[prop+'Timer']);fn&&fn.call(obj);}

                },10);return this;

        },

        fadeIn:function(obj,speed,fn){this.animate(obj,'opacity',100,speed==undefined?20:speed,'linear',fn);return this;},

        fadeOut:function(obj,speed,fn){this.animate(obj,'opacity',0,speed==undefined?20:speed,'linear',fn);return this;},

        slide:function(obj,params,speed,easing,fn){for(var p in params) this.animate(obj,p,params[p],speed,easing,fn);return this;},

        stop:function(obj){//停止所有运动函数

                var animate=['left','right','top','bottom','width','height','opacity'];

                for(var i=0;i<animate.length;i++) if(obj[animate[i]+'Timer']) clearInterval(obj[animate[i]+'Timer']);

                return this;

        },

        initCSS:function(p){

                var css=[],oStyle = document.createElement('style');oStyle.type='text/css';

                if(p.width){css.push('.'+p.style+' *{margin:0;padding:0;border:0;list-style:none;}.'+p.style+'{position:relative;width:'+p.width+'px;height:'+p.height+'px;overflow:hidden;font:12px/1.5 Verdana,Geneva,sans-serif;background:#fff;}.'+p.style+' .loading{position:absolute;z-index:9999;width:100%;height:100%;color:#666;text-align:center;padding-top:'+0.3*p.height+'px;background:#fff}.'+p.style+' .swt,.'+p.style+' .swt li{width:'+p.width+'px;height:'+p.height+'px;overflow:hidden;}.'+p.style+' .txt li,.'+p.style+' .txt li span,.'+p.style+' .txt-bg{width:'+p.width+'px;height:'+p.txtHeight+'px;line-height:'+p.txtHeight+'px;overflow:hidden;}')}

                if(oStyle.styleSheet){oStyle.styleSheet.cssText=css.join('');} else {oStyle.innerHTML=css.join('');}

                var oHead = this.$$('head',document)[0];oHead.insertBefore(oStyle,oHead.firstChild);

        },

        setting:function(par){

                if(window.attachEvent){(function(){try{myFocus.$(par.id).className=par.style;myFocus.initCSS(par);}catch(e){setTimeout(arguments.callee,0);}})();window.attachEvent('onload',function(){myFocus[par.style](par)});}

　　                else{document.addEventListener("DOMContentLoaded",function(){myFocus.$(par.id).className=par.style;myFocus.initCSS(par);},false);window.addEventListener('load',function(){myFocus[par.style](par)},false);}

        },

        addList:function(obj,cla){//生成HMTL,cla为生成列表的class,其中封装有:cla='txt'(生成alt文字),cla='num'(生成按钮数字),cla='thumb'(生成小图)

                var s=[],n=this.$li(obj,0).length,num=cla.length;

                for(var j=0;j<num;j++){

                        s.push('<ul class='+cla[j]+'>');

                        for(var i=0;i<n;i++){s.push('<li>'+(cla[j]=='num'?('<a>'+(i+1)+'</a>'):(cla[j]=='txt'?this.$li(obj,0)[i].innerHTML.replace(/\>(.|\n|\r)*?(\<\/a\>)/i,'>'+(this.$$('img',obj)[i]?this.$$('img',obj)[i].alt:'')+'</a>'):(cla[j]=='thumb'?'<img src='+(this.$$('img',obj)[i].getAttribute("thumb")||this.$$('img',obj)[i].src)+' />':'')))+'<span></span></li>')};

                        s.push('</ul>');

                }; obj.innerHTML+=s.join('');

        },

        switchMF:function(fn1,fn2){

                return "box.removeChild(this.$$('div',box)[0]);var run=function(idx){("+fn1+")();if (index == n - 1) index = -1;var next = idx != undefined ? idx: index + 1;("+fn2+")();index=next;};run(index);if(par.auto!==false) var auto=setInterval(function(){run()},t);box.onmouseover=function(){if(auto) clearInterval(auto);};box.onmouseout=function(){if(auto) auto=setInterval(function(){run()},t);}"

        },

        bind:function(arrStr,type,delay){

                return "for (var j=0;j<n;j++){"+arrStr+"[j].index=j;if("+type+"=='click'){"+arrStr+"[j].onmouseover=function(){if(this.className!='current') this.className='hover'};"+arrStr+"[j].onmouseout=function(){if(this.className=='hover') this.className=''};"+arrStr+"[j].onclick=function(){if(this.index!=index) run(this.index)};}else if("+type+"=='mouseover'){"+arrStr+"[j].onmouseover=function(){var self=this;if("+delay+"==0){if(!self.className) run(self.index)}else "+arrStr+".d=setTimeout(function(){if(!self.className) run(self.index)},"+(delay==undefined?100:delay)+")};"+arrStr+"[j].onmouseout=function(){clearTimeout("+arrStr+".d)};}else{alert('myFocus 不支持这样的事件 \"'+"+type+"+'\"');break;}}"

        },

        extend:function(fnObj){for(var p in fnObj) this[p]=fnObj[p];}

};

/*

* myFocus焦点图基本库代码结束

* 下面是各款基于myFocus库制作的焦点图风格皮肤，可自行按需选择

* myFocus焦点图库及皮肤可自由使用，保留作者相关信息即可，谢谢支持！^^

*/

myFocus.extend({

        mF_tab:function(par){

                var box=this.$(par.id);//定义焦点图盒子

                this.$$('ul',box)[1].innerHTML='<li><ul class=swt>'+this.$$('ul',box)[1].innerHTML+'</ul></li>';

                var btn=this.$li(box,0),swt=this.$$('ul',box)[2],cont=this.$li(box,2);//定义焦点图元素

                var index=par.index||0,n=btn.length,t=par.time*1000;//运行时相关参数

                //CSS

                this.$$('ul',box)[1].style.cssText='width:'+par.width+'px;height:'+par.height+'px;';

                swt.style.width=n*par.width+'px';

                box.style.cssText='width:'+(par.width+2)+'px;height:'+(par.height+29)+'px;';

                if(par.type=='fade'||par.type=='none'){for(var i=0;i<n;i++) cont[i].style.display='none';} 
                //PLAY

                eval(this.switchMF(function(){

                        btn[index].className='';

                        if(par.type=='fade'||par.type=='none') cont[index].style.display='none';

                },function(){

                        if(par.type=='slide') myFocus.slide(swt,{left:-(next*par.width)},20,'easeInOut')

                        if(par.type=='fade') myFocus.fadeIn(cont[next]);

                        if(par.type=='none') cont[next].style.display='';

                        btn[next].className='current';

                }))

                eval(this.bind('btn','par.trigger',par.delay));

        }

})

myFocus.setting({

        style:'mF_tab',//风格样式

        id:'myFocus1',//绑定ID

        trigger:'mouseover',//tab切换模式：'click'(点击切换)/'mouseover'(悬停切换)

        type:'none',//切换效果：'none'（无效果）/'fade'（淡入效果）/'slide'（滑动效果）

        auto:false,//是否自动切换，true为自动，false为非自动

        time:2,//自动切换模式时的切换时间间隔

        width:400,//宽(内容区)

        height:61//高(内容区)

});

myFocus.setting({

        style:'mF_tab',//风格样式

        id:'myFocus2',//绑定ID

        trigger:'mouseover',//tab切换模式：'click'(点击切换)/'mouseover'(悬停切换)

        type:'slide',//切换效果：'none'（无效果）/'fade'（淡入效果）/'slide'（滑动效果）

        auto:false,//是否自动切换，true为自动，false为非自动

        time:2,//自动切换模式时的切换时间间隔

        width:400,//宽(内容区)

        height:61//高(内容区)

});

myFocus.setting({

        style:'mF_tab',//风格样式

        id:'myFocus3',//绑定ID

        trigger:'mouseover',//tab切换模式：'click'(点击切换)/'mouseover'(悬停切换)

        type:'fade',//切换效果：'none'（无效果）/'fade'（淡入效果）/'slide'（滑动效果）

        auto:false,//是否自动切换，true为自动，false为非自动

        time:2,//自动切换模式时的切换时间间隔

        width:400,//宽(内容区)

        height:61//高(内容区)

});

myFocus.setting({

        style:'mF_tab',//风格样式

        id:'myFocus4',//绑定ID

        trigger:'mouseover',//tab切换模式：'click'(点击切换)/'mouseover'(悬停切换)

        type:'slide',//切换效果：'none'（无效果）/'fade'（淡入效果）/'slide'（滑动效果）

        auto:true,//是否自动切换，true为自动，false为非自动

        time:2,//自动切换模式时的切换时间间隔

        width:400,//宽(内容区)

        height:61//高(内容区)

});

</script>

</head>

<body>

<div class="box">

<h4>type:'none'</h4>

<div id="myFocus1">

        <div class="loading"><span>请稍候...</span></div><!--载入画面-->

        <ul class="btn"><!--标题-->

            <li>朋友</li>

        <li>兄弟</li>

        <li>亲人</li>

        <li>情人</li>

    </ul>

    <ul class="cont"><!--内容-->

            <li><p>朋友朋友朋友</p></li>

        <li><p>兄弟兄弟兄弟</p></li>

        <li><p>亲人亲人亲人</p></li>

        <li><p>情人情人情人</p></li>

    </ul>

</div>

</div>

<div class="box">

<h4>type:'slide'</h4>

<div id="myFocus2">

        <div class="loading"><span>请稍候...</span></div><!--载入画面-->

        <ul class="btn"><!--标题-->

            <li>朋友</li>

        <li>兄弟</li>

        <li>亲人</li>

        <li>情人</li>

    </ul>

    <ul class="cont"><!--内容-->

            <li><p>朋友朋友朋友</p></li>

        <li><p>兄弟兄弟兄弟</p></li>

        <li><p>亲人亲人亲人</p></li>

        <li><p>情人情人情人</p></li>

    </ul>

</div>

</div>

<div class="box">

<h4>type:'fade'</h4>

<div id="myFocus3">

        <div class="loading"><span>请稍候...</span></div><!--载入画面-->

        <ul class="btn"><!--标题-->

            <li>朋友</li>


        <li>兄弟</li>

        <li>亲人</li>

        <li>情人</li>

    </ul>

    <ul class="cont"><!--内容-->

         <li><p>sssssssssssss</p></li>

        <li><p>ddddddddddddd</p></li>

        <li><p>aaaaaaaaaaaa</p></li>

        <li><p>wwwwwwwwwwww</p></li>

    </ul>

</div>

</div>

<div class="box">

<h4>type:'slide',auto:true</h4>

<div id="myFocus4">

        <div class="loading"><span>请稍候...</span></div><!--载入画面-->

        <ul class="btn"><!--标题-->

            <li>朋友</li>

        <li>兄弟</li>

        <li>亲人</li>

        <li>情人</li>

    </ul>

    <ul class="cont"><!--内容-->

            <li><p>朋友朋友朋友</p></li>

        <li><p>兄弟兄弟兄弟</p></li>

        <li><p>亲人亲人亲人</p></li>

        <li><p>情人情人情人</p></li>

    </ul>

</div>

</div>

<div style="clear:both"></div>

<div class="tip">

<p>myFocus-tab的HTML结构</p>

<pre>

&lt;div id="myFocus"&gt;

    &lt;div class="loading"&gt;&lt;span&gt;请稍候...&lt;/span&gt;&lt;/div&gt;&lt;!--载入画面--&gt;

    &lt;ul class="btn"&gt;&lt;!--标题--&gt;

            &lt;li&gt;朋友&lt;/li&gt;

        &lt;li&gt;兄弟&lt;/li&gt;

        &lt;li&gt;亲人&lt;/li&gt;

        &lt;li&gt;情人&lt;/li&gt;

    &lt;/ul&gt;

    &lt;ul class="cont"&gt;&lt;!--内容--&gt;

            &lt;li&gt;&lt;p&gt;朋友朋友朋友&lt;/p&gt;&lt;/li&gt;

        &lt;li&gt;&lt;p&gt;兄弟兄弟兄弟&lt;/p&gt;&lt;/li&gt;

        &lt;li&gt;&lt;p&gt;亲人亲人亲人&lt;/p&gt;&lt;/li&gt;

        &lt;li&gt;&lt;p&gt;情人情人情人&lt;/p&gt;&lt;/li&gt;

    &lt;/ul&gt;

&lt;/div&gt;

</pre>

</div>

<div class="tip">

<p>myFocus-tab的调用和参数设置：</p>

<pre>

myFocus.setting({

        style:'mF_tab',//风格样式

        id:'myFocus',//绑定ID

        trigger:'click',//tab切换模式：'click'(点击切换)/'mouseover'(悬停切换)

        type:'slide',//切换效果：'none'（无效果）/'fade'（淡入效果）/'slide'（滑动效果）

        auto:false,//是否自动切换，true为自动，false为非自动

        time:2,//自动切换模式时的切换时间间隔

        width:424,//宽(内容区)

        height:61//高(内容区)

});

</pre>

</div>

<p class="tip2">* 高级：其中还有隐藏参数delay（mouseover模式中的延迟，默认100毫秒延迟）、index（开始时显示tab序号，默认是0，即显示第一个tab），可自行按需添加</p>

</body>

</html>
半支烟丶
关注
专栏目录
Tab栏切换效果的制作
m0_57382477的博客
01-15 1669
第1关：Tab栏CSS样式设计 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Tab栏切换</title>、 <style> /* CSS Document */ /*全局控制*/ body{ font-size:14px; font-family:"宋体";} /*清除浏览器默认样式*/ body,ul,li{list-style:no
tab切换效果
qq_41241504的博客
02-03 409
该dome仅供参考: 免费项目dome包在文章最底部 html <view class="mg_bo"> <view class="bg_bo"> <view class="content"> <view class="img_bo" bindtouchstart='moveStart' bindtouchend='moveItem'> <view wx:for="{{sy_list}}" wx:key="index">
实现栏目点击的一个切换效果非常实用
03-28
一个简单的网页栏目之间的切换效果，显示选中栏目，隐藏其他栏目
js切换栏目效果
月影朦胧的博客
01-02 609
script type="text/javascript" src="http://www.daixiaorui.com/Public/js/jquery.min.js">script>   style>       .menu { padding:0; margin:0; list-style-type:none;}       .menu li { background:#FFD1A4;
非常好的tab栏目切换效果，经典呀！
java攻城师
05-03 302
非常好的tab栏目切换效果 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; ...
tab栏切换原理
11-28
本文是我学习tab栏切换时的笔记，步骤很详细。比较适用于JavaScript初学者 1.基础 – 排他思想 如图，点击任意一个按钮，当前按钮应该显示橘色，其他显示默认颜色灰色。 代码运行步骤： 利用for循环遍历5个按钮； 选中的按钮进行 onclick 事件时，首先删除所有按钮的类名，使其全部显示灰色（34行）； 然后给当前点击的按钮添加指定类名，使其显示橘色（37行）。 示例代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tab栏切换效果</title> <style media="screen">
tab栏的切换效果
lijuhu的博客
10-10 876
导航栏的切换特效
多组tab栏目切换代码
06-10
标题“多组tab栏目切换代码”所提及的是一个集合，包含多种样式和功能的Tab切换实现，适用于那些希望在自己的网站上实现高效信息分类的开发者。下面将详细介绍这个主题中的相关知识点。 1. **Tab组件基础**： - ...
tab切换4中效果-html
12-06
基于css js写的tab栏目切换效果，有动画效果，例如淡入淡出之类的，复制即可使用。 tab切换的布局上面是你要显示的东西下面的选择时的按钮 JavaScript部分先获取元素再循环遍历获得元素的下标（下标：就是有多少的...
css配合JavaScript实现tab标签切换效果
10-17
在网页设计中，实现交互式的用户体验是至关重要的，其中Tab标签切换效果就是一个常见的功能。本篇我们将探讨如何使用CSS和JavaScript结合来创建这样的效果。首先，我们需要理解Tab标签切换的基本原理：用户点击不同...
jQuery水滴选项卡切换栏目特效代码
03-20
jQuery水滴选项卡切换栏目代码是一款jQuery hover水滴导航切换选项卡栏目代码。
实现左右滑动屏幕功能切换栏目
04-03
实现左右滑动屏幕功能切换栏目,可以动态加载内容，可以直接移植到项目中。
js实现两个栏目切换
07-28
用简单的jsDom操作，实现两个栏目切换的效果
tab选项卡新闻列表切换效果代码
10-22
很好用的源码，只需要简单修改就能使用。并且完美兼容各种浏览器。tab选项卡新闻列表切换效果代码
网站“关于我们”版块Tab栏目切换-.zip
最新发布
02-22
Tab栏目切换是这个版块常见的交互方式，能有效地展示多类信息，同时保持页面整洁。本案例主要探讨如何利用Python框架实现这种功能。 Python作为一门强大的编程语言，其丰富的Web开发框架如Django、Flask和Tornado等...
基于JavaScript实现移动端TAB触屏切换效果
10-23
我们使用移动端时可以通过触屏手势左右滑动来切换TAB栏目，如网易新闻等APP栏目切换。我们说的TAB一般由导航条和TAB对应的内容组成，切换导航条上的标签同时标签对应的内容也会跟着切换。本文将结合实例给大家介绍一...
web实战(三)— — Tab选项卡切换效果
热门推荐
theScoreONE的博客
04-19 1万+
参考慕课网教程《Tab选项卡切换效果》：http://www.imooc.com/learn/176 基本功能有延迟切换、自动切换。本文用jquery实现1、html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab标签切换</title> <link href="css/tab
【jQuery】Tab选项卡（li之间的切换）
zuncle的博客
02-09 9193
演示地址：暂未开放，请前往在线代码测试网 HTML代码如下：固定格式在这里就省略了<html> <head></head> <body> <div class="titTabs" style="display: none"> <ul class="titTab"> <li class="active"> <i></i> <span>网点</span> </li>
jquery 简单的栏目切换
weixin_30432579的博客
09-12 131
<style> ul{ list-style:none; padding:0px; margin:0px;} #nav_box{ width:502px; height:402px; overflow:hidden;} #nav_box ul.nav_tit{ width:500px; height:30px; list-style:none;} #nav_box ul.n...
HTML/CSS实现tab切换效果详解
"本文主要介绍了几种常见的Tab切换效果的实现代码，包括鼠标移入移出切换的示例。这些示例对于理解和创建交互式的网页界面非常有帮助，特别是对于初学者或前端开发者来说，提供了很好的参考素材。" 在网页设计中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值