$('ul.main-tab>li').on('mousedown', data, function() {
var $this = $(this), $box = $('.main-tab-content'), i = $this.index();
if ($this.hasClass('on')) { return false; }
switch (i) {
case 1:
window.radarUpdater = self.setInterval(function(){updateRadarTab(data)}, 3000);
break;
case 2:
clearInterval(window.radarUpdater);
updateoptional();
break;
case 3:
clearInterval(window.radarUpdater);
updateNoticeTab();
break;
default:
break;
}
$this.siblings().removeClass('on');
$this.addClass('on');
$box.removeClass('block').css('display', 'none');
$box.eq(i).addClass('block').css('display', 'block');
});

  

JS tab切换事件的更多相关文章

  1. 小程序的tab切换事件

    index.wxml代码 <view class="tab-left" > <view " bindtap="tab">tab ...

  2. 封装tab切换事件

    HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  3. js Tab切换实例

    js 实现 tab 切换 实现如下效果: 1.图片每1秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击切换页的选项上时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应 ...

  4. JS——tab切换

    排它思想: 1.先让所有的元素恢复默认值 2.再让选中的元素赋专有的值 3.干掉所有人,剩下我一个 <!DOCTYPE html> <html> <head lang=& ...

  5. avalon结合原生js tab切换

    <div class="fishqc-tap"> <div ms-class="[@codePic!=''&&@codeInfo!='' ...

  6. tab切换插件开发

    我开发的tab切换插件,基于jquery库,实现tab标签页的切换.插件的名称为jquery.tabSwitch.js. 插件实现代码如下: ; (function ($) { $.fn.tabSwi ...

  7. 可重复使用Tab切换代码和纯js代码

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 监听浏览器tab选项卡选中事件,点击浏览器tab标签页回调事件,浏览器tab切换监听事件

    js事件注册代码: <script> document.addEventListener('visibilitychange',function(){ //浏览器tab切换监听事件 if( ...

  9. js用户管理中心tab切换界面模板

    效果体验:http://hovertree.com/texiao/js/27/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> ...

随机推荐

  1. java 模板

    模板模式: 解决某类事情的步骤有些是固定的,有些是会发生变化的,这时我们提供 一个模板代码,从而提高效率. 模板模式的作用: 1.解决这类事情其中一件的解决方案. 2.分析代码,把发生变化的代码抽象取 ...

  2. android AutoCompleteTextView和Spinner选中项加亮

    package com.example.spinnerexample; import java.util.ArrayList; import java.util.List; import androi ...

  3. 指针转换(C# 编程指南)

    原文地址:https://msdn.microsoft.com/zh-cn/library/etb4xxec.aspx 下表显示了预定义的隐式指针转换.隐式转换可能在多种情形下发生,包括调用方法时和在 ...

  4. 关于json的理解

    一. 获取数组长度 array.length 获取对象长度  Object.keys(objs).length 二. 如何抉择{}和[] 先说两者区别, {}:父类下面直接是子类名称 []:父类下会追 ...

  5. #Javascript:this用法整理

    常用Javascript的人都知道,[this這個關鍵字在一個函式內究竟指向誰]的這個問題很令人頭大,本人在這裡整理了一下Javascript中this的指向的五種不同情況,其中前三種屬於基本的情況, ...

  6. selenium+python笔记9

    #!/usr/bin/env python # -*- coding: utf-8 -*- """ @desc: delete mail 我们多添加一些测试场景,比如:删 ...

  7. spring来了-04-AOP

    概述 aspect object programming 面向切面编程 功能:可以实现“业务代码”与“关注点代码”分离 关注点代码:就是指重复执行的代码 业务代码:核心的业务功能 运行期间,执行核心业 ...

  8. 谈谈JPA-02-HelloWorld

    使用JPA持久化对象的步骤 创建 persistence.xml, 在这个文件中配置持久化单元 需要指定跟哪个数据库进行交互; 需要指定 JPA 使用哪个持久化的框架以及配置该框架的基本属性 创建实体 ...

  9. [redis] 分布式 Redis 的 CRUD 实现

    1.applicationContext-redis.xml <?xml version="1.0" encoding="UTF-8"?> < ...

  10. Eclipse管理Java工程(j2se/j2ee/maven)

    Eclipse管理J2SE/J2EE(Maven)项目 eclipse是一个集成开发工具,有编译,运行,打包部署等功能.eclipse可以新建多种项目,不同的项目有不同的IDE层次结构,方便用户管理资 ...