<!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. 话说C++中的左值、纯右值、将亡值

    写在前面 C++中有“左值”.“右值”的概念,C++11以后,又有了“左值”.“纯右值”.“将亡值”的概念.关于这些概念,许多资料上都有介绍,本文在拾人牙慧的基础上又加入了一些自己的一些理解,同时提出 ...

  2. ACM HDU 2041--超级楼梯题解

    超级楼梯 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  3. 微信小程序-视图条件渲染

    条件渲染 wx:if 在框架中,我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块: <view wx:if="{{condition} ...

  4. php : 基础(5)

    函数 函数的定义: 形式: function 函数名 ( [$形参1] [,$形参2] [,.... ] ){ //函数体...... } 说明: 定义时使用的形参,其实就是一个变量--只能在该函数内 ...

  5. 【树莓派】 Failed to fetch http://mirrordirector.raspbian.org/raspbian/pool/main/c/chkconfig/chkconfig_11.4.54.60.1debian1_all.deb Could not resolve 'mirrordirector.raspbian.org'

    在安装chkconfig的过程中,遇到如下问题: haochuang@raspberrypi:~/webapp $ sudo apt-get install chkconfigReading pack ...

  6. Photoshop投影和CSS box-shadow转换

    "混合模式":Photoshop提供了各式各样的混合模式,但是CSS3阴影只支持正常模式(normal). "颜色(color)":阴影颜色.对应于CSS3阴影 ...

  7. 个人博客作业Week1

    个人博客作业Week1 一.问题 通读<构建之法>我有一下几个问题 PM没有参与代码编如何进行管理. 软件工程师的职业资格考试对我们来说很有必要吗. 当我们为用户开发软件时我们需要了解用户 ...

  8. [地图SkyLine二次开发]框架(1)

    项目介绍: 项目是三维地理信息系统的开发,框架MVC4.0 + EF5.0 + Extjs4.2 + SkyLine + Arcgis,是对SkyLine的二次开发. 项目快结束了,先给大家看一眼效果 ...

  9. build.fxbuild打不开 Failed to create the part's controls

    Failed to create the part's controls 以文本形式打开之后,发现编码的地方不是常用编码 将之修改为GBK 然后就可以正常打开了 最后把eclipse中的编码统一设置为 ...

  10. [官方作品] 关于ES4的设首页问题

    [官方作品] 关于ES4的设首页问题 Skyfree 发表于 2013-2-10 21:55:03 https://www.itsk.com/thread-254503-1-1.html 关于ES4设 ...