tab切换,滑动门
<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切换,滑动门的更多相关文章
- 几个Tab,滑动门,选项卡,图片切换
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- jquery插件之tab标签页或滑动门
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...
- 代码简洁的滑动门(tab)jquery插件
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...
- 解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时,图表显示错乱-实现滑动tab
解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...
- 微信小程序实现滑动tab切换和点击tab切换并显示相应的数据(附源代码)
这里主要用到了swiper组件和三目运算,直接上代码, 样式只有三个class,简单粗暴,懒的小伙伴们可以直接拿来用,喜欢的点个支持 <view> <view class=" ...
- JS滑动门,JQuery滑动门
<a href="#" id="one1" onmouseover="setTab('one',1,2)" class="h ...
- 李洪强和你一起学习前端之(9)规避脱标,CSS可见性,滑动门案例
1 复习昨天知识 1.1 浮动 特点: >浮动的元素不占位置(脱标) >可以将行内元素转化为行内块元素 >块级元素在一行上显示 >设置了浮动的元素,影响其后面的元素 作 ...
- 基于zepto的H5/移动端tab切换触摸拖动加载更多数据
以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...
- 很好用的Tab标签切换功能,延迟Tab切换。
一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...
- WPF案例(-)模拟Windows7 Win+Tab切换
原文:WPF案例(-)模拟Windows7 Win+Tab切换 一个使用Wpf模拟Windows7 Win+Tab页面切换的小程序,使用快捷键Ctrl+Down或Ctrl+Up在示例程序各个页面元素之 ...
随机推荐
- FIFA halts 2026 bids amid scandal 国际足联在丑闻期间停止2026年足球世界杯申请
FIFA halts 2026 bids amid scandal 国际足联在丑闻期间停止2026年足球世界杯申请 But official insists 2018 Cup will stay in ...
- sql 分页的两种写法
string Strsql = string.Format(@"select ee.DOCUMENTNO,ee.APPLICANTNAME,ee.COMPANY,ee.REQUESTTIME ...
- 理解Linux系统/etc/init.d目录和/etc/rc.local脚本
一.关于/etc/init.d 如果你使用过Linux系统,那么你一定听说过init.d目录.这个目录到底是干嘛的呢?它归根结底只做了一件事情,但这件事情非同小可,是为整个系统做的,因此它非常重 ...
- 10月17日下午MySQl数据库CRUD高级查询
高级查询:1.连接查询 #适用于有外键关系的 没有任何关系没法用select * from Info,Nation #同时查询这俩表并把两表每个数据相互组合,形成笛卡尔积 select * from ...
- JavaWeb学习笔记——开发动态WEB资源(一)Java程序向浏览器输出数据
开发一个动态web资源,即开发一个Java程序向浏览器输出数据,需要完成以下2个步骤: 1.编写一个Java类,实现Servlet接口 开发一个动态web资源必须实现javax.servlet.Ser ...
- AOP PostSharp
using System; using System.Collections.Generic; using System.Linq; using System.Text; using PostShar ...
- Open Yale course:Listening to Music
一.Introductionhttps://app.yinxiang.com /Home.action?offer=www_menu#n=4b034a29-986d-4914-8220-eb99c2e ...
- OC-id、构造方法
id 简介 万能指针,能指向任何OC对象,相当于NSObject * id类型的定义 typedef struct objc_object { Class isa; } *id; 使用 // 注意:i ...
- fis总结
1.fis捕获组 $1.$2.$3……是正则表达式替换中对捕获组的引用 $0或$&是对整个匹配字符串的引用 2.fis命令 fis3 release -d ../output prod -wL ...
- 浅谈T-SQL中的子查询
引言 这篇文章我们来简单的谈一下子查询的相关知识.子查询可以分为独立子查询和相关子查询.独立子查询不依赖于它所属的外部查询,而相关子查询则依赖于它所属的外部查询.子查询返回的值可以是标量(单值).多值 ...