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

网络编程 2024/11/16 佚名

3 1 2

本文实例讲述了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选项卡

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

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

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

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

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

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

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

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

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

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

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

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存