<!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>

<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" name="viewport"/>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>tab点击事件优化</title>

<style>

body,html{margin:0;padding:0;}

.tab_menu{border-bottom:1px solid #e6e6e6;}

.tab_menu a{color:#666;padding:0 10px;line-height:30px;display:inline-block;text-decoration:none;font-size:14px;}

.tab_menu a.crently{color:red;background:#e6e6e6;}

.tab_area{border:1px solid #e6e6e6;width:400px;margin:20px auto 0;}

.tab_content{font-size:12px;}

.tab_content .tab_item{display:none;padding:15px;}

.tab_content .tab_item.block{display:block;}

</style>

</head>

<body>

<!-- tab 1-->

<div class="tab_area">

    <div class="tab_menu">

        <a href="javascript:;" class="crently">菜单1</a><a href="javascript:;">菜单2</a><a href="javascript:;">菜单3</a><a href="javascript:;">菜单4</a>

    </div>

    <div class="tab_content">

        <div class="tab_item block">内容1</div>

        <div class="tab_item">内容2</div>

        <div class="tab_item">内容3</div>

        <div class="tab_item">内容4</div>

    </div>

</div>

<!-- tab 2-->

<div class="tab_area">

    <div class="tab_menu">

        <a href="javascript:;" class="crently">菜单1</a><a href="javascript:;">菜单2</a><a href="javascript:;">菜单3</a><a href="javascript:;">菜单4</a>

    </div>

    <div class="tab_content">

        <div class="tab_item block">内容1</div>

        <div class="tab_item">内容2</div>

        <div class="tab_item">内容3</div>

        <div class="tab_item">内容4</div>

    </div>

</div>

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">

$(function(){

	//tab

	$(".tab_menu").click(function(e){

		var e = e || window.event;

        var target = e.target || e.srcElement;

		var tab_menu_crent="crently";//当前tab菜单样式

		var tab_item_crent="block";//当前tab对应的tab_item样式

        if(target.nodeName.toLowerCase() == "a") {

			if(!$(target).hasClass(tab_menu_crent))

			{

				$(target).addClass(tab_menu_crent).siblings("."+tab_menu_crent).removeClass(tab_menu_crent);

				$(this).parent().find(".tab_item").eq($(target).index()).addClass(tab_item_crent).siblings("."+tab_item_crent).eq(0).removeClass(tab_item_crent);

			}

        }

	});

});

</script>

</body>

</html>

tab事件优化-事件代理的更多相关文章

  1. jquery事件优化---事件委托

    假如你有一个表格,里面有大量的td 而你需要做的事就是,给td绑定点击事件函数, 那么多的td,遍历单元格和为每一个单元格绑定事件处理函数将会大大降低代码的性能, 如果让单元格的父元素监听事件,只要判 ...

  2. Js 中的事件委托/事件代理

    什么叫事件委托/事件代理呢 ? JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件.   事件冒泡: 当事件发生后,这个事件就要开始传 ...

  3. JS中的事件委托/事件代理详解

    起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...

  4. js性能优化-事件委托

    js性能优化-事件委托 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少 ...

  5. JavaScript中事件委托(事件代理)详解

    在JavaScript的事件中,存在事件委托(事件代理),那么什么是事件委托呢? 事件委托在生活中的例子: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托 ...

  6. python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  7. js 事件委托 事件代理

    JavaScript高级程序设计上解释:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 通过例子类比: 有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三 ...

  8. Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理

    Atitit.  Js 冒泡事件阻止 事件捕获   事件传递  事件代理   1. 事件冒泡1 2. 事件捕获1 3. 同时支持了事件捕获阶段和事件冒泡阶段ddEventListener的第三个参数1 ...

  9. 移动端触摸、点击事件优化（fastclick源码学习）

    移动端触摸.点击事件优化(fastclick源码学习) 最近在做一些微信移动端的页面,在此记录关于移动端触摸和点击事件的学习优化过程,主要内容围绕fastclick展开.fastclick githu ...

随机推荐

  1. JavaScript对象的chapterIII

    二.DOM对象: DOM (document object model) 文档对象模型,它定义了操作文档对象的接口. DOM 把一份html文档表示为一棵家谱树,使用parent(父), child( ...

  2. centos7 安装php7+mysql5.7+nginx+redis

    .1.先修改yum源  https://webtatic.com rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest- ...

  3. VB默认属性、动态数组、Range对象的默认属性的一点不成熟的想法

    1.默认属性 VB6.0有默认属性的特性.当没有给对象指定具体的属性时,"默认属性"是VB6.0将使用的属性.在某些情形下,省略常用属性名,使代码更为精简. 因为CommandBu ...

  4. js 求点到直线的距离（由2点确定的直线，求到第三点的距离）

    需要用到2个数学公式 1,已知2点求其直线方程 2,点到直线的距离 1,Y=kX+b 分别将两点带入以上方程,求出k 和b 例如: p0={x:?,y:?}, p1={x:?,y:?} 可解得方程: ...

  5. Java中List根据对象的属性值进行数据库group by功能的操作

    public class test { public static void main(String[] args) { List<Bill> list = new test().setO ...

  6. iOS - Bitcode App 瘦身中间码

    1.Bitcode 随着 Xcode7 的发布,Apple 提供了一项新的技术来支持 App 瘦身功能,那就是 Bitcode. 1.BitCode 是什么 Bitcode is an interme ...

  7. webpack + react + es6, 并附上自己碰到的一些问题

    最近一直在学react,react的基础部分已经学得差不多了,然而自己并没有做详细的记录,有兴趣的同志可以参考阮一峰老师的教程,个人觉得挺不错的,链接如下:https://github.com/rua ...

  8. OnTimer

    OnTimer不是多线程. OnTimer是以SendMessage的方式发送消息到消息队列. sendMessage必须等待对话框响应完消息后才返回.

  9. 基于Red5的视频直播平台

    搭建环境:Win2008 server + jdk1.8+red5-server-1.0.6 下载地址:https://github.com/Red5 修改启动配置文件(修改为jdk路径): 安装模版 ...

  10. Missing (Mono Script), Missing Prefab

    开始研究Google Cardboard SDK,下载了一份gvr-unity-sdk,用Unity打开里面的Samples: CastleDefense,导出XCode项目在iPhone上面运行,出 ...