JS基于myFocus库实现各种功能的tab选项卡切换效果

网络编程 2024/11/14 佚名

3 2 1

本文实例讲述了JS基于myFocus库实现各种功能的tab选项卡切换效果。分享给大家供大家参考。具体如下：

这里介绍使用myFocus-tab实现各种功能的选项卡切换，有的是带有动画效果的，各款基于myFocus库制作的焦点图风格皮肤，可自行按需选择，myFocus焦点图库及皮肤可自由使用，保留作者相关信息即可，谢谢支持！^^

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-myfocus-plug-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>myFocus-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; }
.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 { width:426px; height:90px; margin-left:16px; }
.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 p { padding:16px; }
</style>
<script type="text/javascript">
var myFocus={
  $:function(id){return document.getElementById(id);},
  $$:function(tag,obj){return (typeof obj=='object'"alpha(opacity=" + v + ")"; obj.style.opacity = (v / 100);}
    else return (!+[1,])"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){
    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'"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 "+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")};"+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.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),wrap=this.$$('ul',box)[1],swt=this.$$('ul',box)[2],cont=this.$$_('li',swt);
    var index=par.index||0,n=btn.length,t=par.time*1000;
    swt.style.width=n*par.width+'px';
    for(var i=0;i<n;i++) cont[i].style.cssText='width:'+par.width+'px;height:'+par.height+'px;float:left;';
    par.height=par.height=='auto'"box">
 <h4>支持无限嵌套</h4>
 <div id="tabWrap">
 <div class="loading"><span>请稍候...</span></div>
 <!--载入画面-->
 <ul class="btn">
  <!--标题-->
  <li>朋友</li>
  <li>兄弟</li>
  <li>亲人</li>
  <li>情人</li>
 </ul>
 <ul class="cont">
  <!--内容-->
  <li>
  <p>朋友朋友朋友</p>
  <div id="tabInner1">
   <div class="loading"><span>请稍候...</span></div>
   <!--载入画面-->
   <ul class="btn">
   <!--标题-->
   <li>朋友</li>
   <li>兄弟</li>
   <li>亲人</li>
   <li>情人</li>
   </ul>
   <ul class="cont">
   <!--内容-->
   <li>
    <p>朋友朋友朋友</p>
    <div id="tabInner2">
    <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>
   </li>
   <li>
    <p>兄弟兄弟兄弟</p>
   </li>
   <li>
    <p>亲人亲人亲人</p>
   </li>
   <li>
    <p>情人情人情人</p>
   </li>
   </ul>
  </div>
  </li>
  <li>
  <p>兄弟兄弟兄弟</p>
  </li>
  <li>
  <p>亲人亲人亲人</p>
  </li>
  <li>
  <p>情人情人情人</p>
  </li>
 </ul>
 </div>
</div>
<style>
.qqTab{margin-bottom:12px;}
.qqTab .btn li { background:#A1DEFE;border-color:#36BAF0; }
.qqTab .btn li.current { height:27px; background:#F9FEFF; }
.qqTab .cont{border-color:#36BAF0; }
.qqTab .list{float:left;overflow:hidden;text-align:center;margin:16px;margin-right:0;display:inline;}
.qqTab .list ul li{list-style:circle;}
.qqTab .left{width:150px;background:#1EB2EF;}
.qqTab .middle{width:236px;background:#D4F2FD;}
.qqTab .right{width:150px;background:#CE4982;}
</style>
<div class="box qqTab">
<h4>仿QQ今日要闻实例</h4>
<div id="qqTab">
 <div class="loading"><span>请稍候...</span></div>
 <!--载入画面-->
 <ul class="btn">
  <!--标题-->
  <li>新闻</li>
  <li>财经</li>
  <li>娱乐</li>
  <li>体育</li>
 </ul>
 <ul class="cont">
  <!--内容-->
  <li>
  <div class="list left">
    <ul>
     <li>新闻左列表</li>
    <li>新闻左列表</li>
    <li>新闻左列表</li>
    <li>新闻左列表</li>
   </ul>
  </div>
  <div class="list middle">
    <ul>
     <li>新闻中列表</li>
    <li>新闻中列表</li>
    <li>新闻中列表</li>
    <li>新闻中列表</li>
   </ul>
  </div>
  <div class="list right">
    <ul>
     <li>新闻右列表</li>
    <li>新闻右列表</li>
    <li>新闻右列表</li>
    <li>新闻右列表</li>
   </ul>
  </div>
  </li>
  <li>
  <div class="list left">
    <ul>
     <li>财经左列表</li>
    <li>财经左列表</li>
    <li>财经左列表</li>
    <li>财经左列表</li>
   </ul>
  </div>
  <div class="list middle">
    <ul>
     <li>财经中列表</li>
    <li>财经中列表</li>
    <li>财经中列表</li>
    <li>财经中列表</li>
   </ul>
  </div>
  <div class="list right">
    <ul>
     <li>财经右列表</li>
    <li>财经右列表</li>
    <li>财经右列表</li>
    <li>财经右列表</li>
   </ul>
  </div>
  </li>
  <li>
  <div class="list left">
    <ul>
     <li>娱乐左列表</li>
    <li>娱乐左列表</li>
    <li>娱乐左列表</li>
    <li>娱乐左列表</li>
   </ul>
  </div>
  <div class="list middle">
    <ul>
     <li>娱乐中列表</li>
    <li>娱乐中列表</li>
    <li>娱乐中列表</li>
    <li>娱乐中列表</li>
   </ul>
  </div>
  <div class="list right">
    <ul>
     <li>娱乐右列表</li>
    <li>娱乐右列表</li>
    <li>娱乐右列表</li>
    <li>娱乐右列表</li>
   </ul>
  </div>
  </li>
  <li>
  <div class="list left">
    <ul>
     <li>体育左列表</li>
    <li>体育左列表</li>
    <li>体育左列表</li>
    <li>体育左列表</li>
   </ul>
  </div>
  <div class="list middle">
    <ul>
     <li>体育中列表</li>
    <li>体育中列表</li>
    <li>体育中列表</li>
    <li>体育中列表</li>
   </ul>
  </div>
  <div class="list right">
    <ul>
     <li>体育右列表</li>
    <li>体育右列表</li>
    <li>体育右列表</li>
    <li>体育右列表</li>
   </ul>
  </div>
  </li>
 </ul>
 </div>
</div>
<div class="box qqTab">
<h4>支持高度自适应（auto）设置</h4>
<div id="qqTabAuto">
 <div class="loading"><span>请稍候...</span></div>
 <!--载入画面-->
 <ul class="btn">
  <!--标题-->
  <li>新闻</li>
  <li>财经</li>
  <li>娱乐</li>
  <li>体育</li>
 </ul>
 <ul class="cont">
  <!--内容-->
  <li>
  <div class="list left">
    <ul>
     <li>新闻左列表</li>
    <li>新闻左列表</li>
    <li>新闻左列表</li>
    <li>新闻左列表</li>
   </ul>
  </div>
  <div class="list middle">
    <ul>
     <li>新闻中列表</li>
    <li>新闻中列表</li>
    <li>新闻中列表</li>
    <li>新闻中列表</li>
    <li>这是测试高度自适应</li>
    <li>这是测试高度自适应</li>
    <li>这是测试高度自适应</li>
    <li>这是测试高度自适应</li>
   </ul>
  </div>
  <div class="list right">
    <ul>
     <li>新闻右列表</li>
    <li>新闻右列表</li>
    <li>新闻右列表</li>
    <li>新闻右列表</li>
   </ul>
  </div>
  </li>
  <li>
  <div class="list left">
    <ul>
     <li>财经左列表</li>
    <li>财经左列表</li>
    <li>财经左列表</li>
    <li>财经左列表</li>
   </ul>
  </div>
  <div class="list middle">
    <ul>
     <li>财经中列表</li>
    <li>财经中列表</li>
    <li>财经中列表</li>
    <li>财经中列表</li>
   </ul>
  </div>
  <div class="list right">
    <ul>
     <li>财经右列表</li>
    <li>财经右列表</li>
    <li>财经右列表</li>
    <li>财经右列表</li>
   </ul>
  </div>
  </li>
  <li>
  <div class="list left">
    <ul>
     <li>娱乐左列表</li>
    <li>娱乐左列表</li>
    <li>娱乐左列表</li>
    <li>娱乐左列表</li>
   </ul>
  </div>
  <div class="list middle">
    <ul>
     <li>娱乐中列表</li>
    <li>娱乐中列表</li>
    <li>娱乐中列表</li>
    <li>娱乐中列表</li>
   </ul>
  </div>
  <div class="list right">
    <ul>
     <li>娱乐右列表</li>
    <li>娱乐右列表</li>
    <li>娱乐右列表</li>
    <li>娱乐右列表</li>
   </ul>
  </div>
  </li>
  <li>
  <div class="list left">
    <ul>
     <li>体育左列表</li>
    <li>体育左列表</li>
    <li>体育左列表</li>
    <li>体育左列表</li>
   </ul>
  </div>
  <div class="list middle">
    <ul>
     <li>体育中列表</li>
    <li>体育中列表</li>
    <li>体育中列表</li>
    <li>体育中列表</li>
   </ul>
  </div>
  <div class="list right">
    <ul>
     <li>体育右列表</li>
    <li>体育右列表</li>
    <li>体育右列表</li>
    <li>体育右列表</li>
   </ul>
  </div>
  </li>
 </ul>
 </div>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

JS,myFocus库,tab选项卡

标签：

JS,myFocus库,tab选项卡

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“JS基于myFocus库实现各种功能的tab选项卡切换效果”

JS基于myFocus库实现各种功能的tab选项卡切换效果

暂无“JS基于myFocus库实现各种功能的tab选项卡切换效果”评论...

JS基于myFocus库实现各种功能的tab选项卡切换效果

JS,myFocus库,tab选项卡

jQuery实现点击按钮弹出可关闭层的浮动层插件

JS实现仿雅虎首页快捷登录入口及导航模块效果

评论“JS基于myFocus库实现各种功能的tab选项卡切换效果”

P70系列延期，华为新旗舰将在下月发布

更新动态

友情链接