<!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. GET方法和POST方法

    package com.hanqi.cunchu; import android.app.ProgressDialog; import android.support.v7.app.AppCompat ...

  2. 浅析word-break work-wrap区别

    word-break:[断词] 定义:规定自动换行的处理方法.   注:通过word-break使用,可以实现让浏览器在任意位置换行. 语法:word-break: normal|break-all| ...

  3. FtpClient.storeFile返回false解决方法

    在确定路径和文件名没有中文的情况下添加以下代码 ftp.setFileTransferMode(ftp.BINARY_FILE_TYPE); ftp.enterLocalPassiveMode();/ ...

  4. 月薪3万的程序员告诉你：这样工作才能拿高薪(转 IT之家)

    习惯即刻回报 他不懂得只有春天播种,秋天才会有收获.刚刚付出一点点,甚至还没有付出,就想要得到回报.技术刚刚掌握,能一边百度一边干活了就觉得该拿到多少多少钱了.找工作先想着多少多少钱,入职了没干几个月 ...

  5. jQuery index()

    index() index() 方法返回指定元素相对于其他指定元素的 index 位置. 语法 $(selector1).index(selector2) selector2:可选,指定元素:为空时默 ...

  6. arm-linux-androideabi-addr2line

    ./arm-linux-androideabi-addr2line -C -f -e libc.so 00040d94

  7. 20161117__Z

    1.cclplus: error: unrecognized command line option "-std=gnu++11" http://www.gowhich.com/b ...

  8. ToolBar 修改边距

    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android ...

  9. k.APR通道特殊配置

    APR/native specific configuration The following attributes are specific to the APR/native connector. ...

  10. 【转】 linux内存管理

    一 为什么需要使用虚拟内存 大家都知道,进程需要使用的代码和数据都放在内存中,比放在外存中要快很多.问题是内存空间太小了,不能满足进程的需求,而且现在都是多进程,情况更加糟糕.所以提出了虚拟内存,使得 ...