<!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. php 5.3新增的闭包语法介绍function() use() {}

    * 下面提到的代码在PHP5.3以上版本运行通过. */function callback($callback) { $callback();}//输出: This is a anonymous fu ...

  2. IIS设置session时长

    打开IIS管理器,选择要设置的session的网站,打开右边窗口的会话状态.选择状态服务器,设置连接字符串,并在服务管理开户状态服务 ASP.NET State Service

  3. 无法启动调试。未安装Silverlight Developer运行时。最新运行时可以从以下地址下载： http://go.microsoft.com/fwlink/?LinkId=146060.

    无法启动调试.未安装Silverlight Developer运行时.最新运行时可以从以下地址下载: http://go.microsoft.com/fwlink/?LinkId=146060. 解决 ...

  4. angularjs指令系统系列课程（3）：替换replace，内容保留transclude,作用方式restrict

    这一节我们主要看一下replace,transclude,restrict这三个参数 1.replace 可取值:bool 默认为:true 对于replace属性,设置为false表示原有指令标识不 ...

  5. a标签的作用

    a标签的hover,active,target,visited等伪类在所有浏览器中是兼容的,而其他元素的这些伪类并不全兼容:   a标签本身是跳转页面的,把跳转的地址写在href这个属性中, (1)不 ...

  6. java文章显示内容部分(将html转成纯文本)

    public static String splitAndFilterString(String input, int length) { if (input == null || input.tri ...

  7. jq pagination分页 全选、单选的思考

    $().pagination(总条数,配置项); 后端分页的跨页选择: 思路:把浏览过的页整体保存为,整体拥有 curPage(当前页码).allChoice(当前页是否全选).selected当前页 ...

  8. Linux新建用户并添加到sudo组

    原文参考链接:https://www.douban.com/note/338488349/ 以在kali 下添加一个test用户为例: Step1#:添加新用户useradd -r -m -s /bi ...

  9. TypeError: coercing to Unicode: need string or buffer, ChatRoom found

    在用django框架中遇到一个错误,是模型编写中出的错误 TypeError: coercing to Unicode: need string or buffer, ChatRoom found 解 ...

  10. 【Delphi7】 解决“程序第一次可以正常编译，但再次编译的时候会报错，必须重新打开Delphi”的问题

    报错如下: Access violation at address 00495044 in module 'coreide70.bpl'. Read of address...Access viola ...