发布于 2017-07-17 17:56:22 | 25 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


这篇文章主要介绍了js实现的tab标签切换效果,功能非常简单,实现了点击切换的效果,推荐给大家,有需要的小伙伴可以参考下。

直接先来个真相吧:

 

【HTML代码】


<div id="menu">
<!--tag标题-->
  <ul id="nav">
    <li><a href="#" class="selected">tab1</a></li>
    <li><a href="#" class="">tab2</a></li>
    <li><a href="#" class="">tab3</a></li>
    <div style="clear:both"></div>
  </ul>
<!--二级菜单-->
  <div id="menu_con">
    <div class="tag" style="display:block">
      这是TAB切换效果区域1
     </div> 
    <div class="tag" style="display:none">
      这是TAB切换效果区域2  
     </div> 
    <div class="tag" style="display:none">
      这是TAB切换效果区域3
    </div> 
</div>
</div>


【js】


/**
 * tabs
 * @author  橡树小屋
 */
var tabs=function(){
  function tag(name,elem){
    return (elem||document).getElementsByTagName(name);
  }
  //获得相应ID的元素
  function id(name){
    return document.getElementById(name);
  }
  function first(elem){
    elem=elem.firstChild;
    return elem&&elem.nodeType==1? elem:next(elem);
  }
  function next(elem){
    do{
      elem=elem.nextSibling; 
    }while(
      elem&&elem.nodeType!=1 
    )
    return elem;
  }
  return {
    set:function(elemId,tabId){
      var elem=tag("li",id(elemId));
      var tabs=tag("div",id(tabId));
      var listNum=elem.length;
      var tabNum=tabs.length;
      for(var i=0;i<listNum;i++){
          elem[i].onclick=(function(i){
            return function(){
              for(var j=0;j<tabNum;j++){
                if(i==j){
                  tabs[j].style.display="block";
                  //alert(elem[j].firstChild);
                  elem[j].firstChild.className="selected";
                }
                else{
                  tabs[j].style.display="none";
                  elem[j].firstChild.className="";
                }
              }
            }
          })(i)
      }
    }
  }
}();
window.onload=function(){
  tabs.set("nav","menu_con");
}


【CSS】


body{ background:#FFF;}
a{color:#585858}
#menu{width:360px;}
/*-------------------nav样式----------------------*/
#menu #nav {display:block;width:100%;padding:0;margin:0;list-style:none;
 background:url(../images/bg.gif)}
#menu #nav li {float:left;width:120px;}
#menu #nav li a {display:block;line-height:27px;text-decoration:none;padding:0 0 0 5px; text-align:center}
 
/*-------------------列表标题样式----------------------*/
#menu_con{ width:358px; height:135px;border:1px solid #BF9660; border-top:none}
.selected{background:url(../images/tag_bg.gif);}
.clear{ clear:both}


调用方法:

tabs.set("nav","menu_con");

代码下载 点击这里

这个实例只是简单实现了点击切换的效果,还有许多功能可以添加,大家一起动手实践一下吧。



相关阅读 :
js实现tab切换效果实例
js实现tab切换效果
JS简单实现tab切换效果的多窗口显示功能
JS实现的倒计时效果实例(2则实例)
js实现收缩菜单效果实例代码
js实现的切换面板实例代码
div+css+js模拟tab切换效果 事件绑定 IE,firefox兼容
原生JS实现的放大镜效果实例代码
JS实现的打字机效果完整实例
用js实现放大镜的效果的简单实例
js组件SlotMachine实现图片切换效果制作抽奖系统
简单实现js选项卡切换效果
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务