<SCRIPT type=text/javascript>
  jQuery(document).ready(function () {
          changediv(["#ha1","#ha2"],["#hw1","#hw2"],"one")
    })    
      
  function changediv(menus,divs,opclass){
      if(menus.length != divs.length){
          alert("菜单个数与内容痛");
          return false;
          }
    for(var i=0; i<menus.length;i++){
        $(menus[i]).mouseover(function(){
              //alert("你搞错没有啊");
            // $(this).addClass(opclass).siblings().removeClass("one")
             for(var j=0; j<menus.length; j++){
                 $(menus[j]).removeClass(opclass);
                 $(divs[j]).css("display","none");
                 }
            //$(this).addClass(opclass);    
            $(this).addClass(opclass)    
            $(divs[$(this).index()]).css("display","block");
            })
        
        }      
      
      }
</SCRIPT>

function scrollDoor(){
}
scrollDoor.prototype = {
    sd : function(menus,divs,openClass,closeClass){
        var _this = this;
        if(menus.length != divs.length)
        {
            alert("菜单层数量和内容层数量不一样!");
            return false;
        }                
        for(var i = 0 ; i < menus.length ; i++)
        {    
            _this.$(menus[i]).value = i;                
            _this.$(menus[i]).鼠标over事件[请自行修改] = function(){
                    
                for(var j = 0 ; j < menus.length ; j++)
                {                        
                    _this.$(menus[j]).className = closeClass;
                    _this.$(divs[j]).style.display = "none";
                }
                _this.$(menus[this.value]).className = openClass;    
                _this.$(divs[this.value]).style.display = "block";                
            }
        }
        },
    $ : function(oid){
        if(typeof(oid) == "string")
        return document.getElementById(oid);
        return oid;
    }
}

 jQuery(document).ready(function () {

var SDmodel = new scrollDoor();

SDmodel.sd(["an1", "an2","an3","an4","an5","an6"],["adr1", "adr2", "adr3","adr4","adr5","adr6"],"one");

    })

tab切换,滑动门的更多相关文章

  1. 几个Tab,滑动门,选项卡,图片切换

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  3. 代码简洁的滑动门(tab)jquery插件

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...

  4. 解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时,图表显示错乱-实现滑动tab

    解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...

  5. 微信小程序实现滑动tab切换和点击tab切换并显示相应的数据(附源代码)

    这里主要用到了swiper组件和三目运算,直接上代码, 样式只有三个class,简单粗暴,懒的小伙伴们可以直接拿来用,喜欢的点个支持 <view> <view class=" ...

  6. JS滑动门,JQuery滑动门

    <a href="#" id="one1" onmouseover="setTab('one',1,2)" class="h ...

  7. 李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例

    1  复习昨天知识 1.1 浮动  特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素   作 ...

  8. 基于zepto的H5/移动端tab切换触摸拖动加载更多数据

    以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...

  9. 很好用的Tab标签切换功能,延迟Tab切换。

    一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...

  10. WPF案例(-)模拟Windows7 Win+Tab切换

    原文:WPF案例(-)模拟Windows7 Win+Tab切换 一个使用Wpf模拟Windows7 Win+Tab页面切换的小程序,使用快捷键Ctrl+Down或Ctrl+Up在示例程序各个页面元素之 ...

随机推荐

  1. 【原】javascript执行环境及作用域

    最近在重读<javascript高级程序设计3>,觉得应该写一些博客记录一下学习的一些知识,不然都忘光啦.今天要总结的是js执行环境和作用域. 首先来说一下执行环境 一.执行环境 书上概念 ...

  2. HTML1

    1.  前端:html:做网页的内容 CSS: 做网页的外观 JS:执行网页的动作 前端是静态网页,内容写死.要有变化的内容,需要数据库 浏览器去解析生成漂亮的界面 后台技术:.Net C# 数据库: ...

  3. Repeater 获取数据值

    <input id="btn_fld_PRD_UM" class="btn" type="button" value="选择 ...

  4. Latent Semantic Analysis (LSA) Tutorial 潜语义分析LSA介绍 一

    Latent Semantic Analysis (LSA) Tutorial 译:http://www.puffinwarellc.com/index.php/news-and-articles/a ...

  5. eclipse自动部署问题

    1. 使用myeclipse自动部署的方法(使用myeclipse 2015自动部署有问题,待解决)(换成2014的便可以自动部署): 1.Window->preferences->Mye ...

  6. C/C++宏中#与##的讲解

    http://www.cnblogs.com/morewindows/archive/2011/08/18/2144112.html

  7. MySQL编译安装错误:No curses/termcap library found的解决方法

    CentOS编译安装MySQL,./coonfigure时出现错误: checking for termcap functions library... configure: error: No cu ...

  8. EditPlus开发Python的简单设置

    EditPlus是一个功能强大的编辑器,这里介绍用它来开发Python程序所需要的简单设置. 环境:win7 1.设置Python语法缩进: [1]工具-->设置用户自定义工具 [2]在分类面板 ...

  9. Aspect Oriented Programming using Interceptors within Castle Windsor and ABP Framework AOP

    http://www.codeproject.com/Articles/1080517/Aspect-Oriented-Programming-using-Interceptors-wit Downl ...

  10. Session共享的解决方案

    http://www.cnblogs.com/xinhaijulan/archive/2010/08/21/1805116.html Session共享的解决方案 1.客户端SessionID值唯一: ...