<!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. LookUpEditPopup自动调整宽度

    this.Properties.BestFitMode = BestFitMode.BestFitResizePopup;

  2. 用pecl/pear独立编译PHP扩展 vs. 把扩展编译到PHP内核中

    将扩展编译到php内部的方式会提高php运行扩展的效率,但是每次需要新添加扩展时都需要把php以及之前添加的所有扩展重新编译一边,非常麻烦. 独立编译扩展,php外部调用扩展的方式虽然会牺牲一点点的性 ...

  3. MyBatis 入门（一）

    MyBatis mybatis和hibernate都属于orm(对象与关系映射) 框架 mybatis的优点: 1.sql-mapping :操作更自由,可控性高,执行效率更高 2.轻量,学习更容易 ...

  4. JAX-WS使用Handler Chain加工消息

    承前 本文的示例,是基于前一篇文章中的实例而改进的,如果想要运行本文的代码例子,需要先实现前一篇的代码. 前一篇文章JAX-WS开发WebService初级 Handler概念 在WebService ...

  5. red hat安装mysql二进制包

    数据包命名格式解释 mysql-5.7.15-linux-glibc2.5-x86_64.tar.gz 黑色粗体表示为包名称 蓝色表示linux系统二进制包 红色表示构架     1.上传mysql- ...

  6. 使用layer.open时content属性传值记录

    最近在做一个后台项目,正好碰上了要使用layer.open,就顺手记录一下,方便以后遇到了有个参考 - 2016/11/7 layer 这个是一个web弹层组件,挺好用的...然后项目框架是SSM.. ...

  7. File system needs to be upgraded. You have version null and I want version 7

    安装hbase时候报错: File system needs to be upgraded. You have version null and I want version 7 注: 我安装的hba ...

  8. Security » Authorization » 基于资源的授权

    Resource Based Authorization¶ 基于资源的授权 68 of 73 people found this helpful Often authorization depends ...

  9. Oracle之常见问题诊断方法

    Oracle认证:常见问题诊断方法如下: 1.TNS-12154 Error 或ORA-12154 特征:SQL*NET没有找到连接串或别名 原因1:(1)没有找到TNSNAMES.ORA文件,该文件 ...

  10. JQuery实现table分页

    1.直接贴代码: ; //每页显示的记录条数 ; //显示第curPage页 var len; //总行数 var page; //总页数 $(function(){ len =$(; //去掉表头 ...