网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

关于tab点击事件的优化

关注我吧
 2016/3/28 13:27:20 阅读次数:1133

一、前言

2010年写过一篇《js多个tab切换简单不需要在body内添加事件》的文章,近些年来从事前端事业以来,对于js的优化也是越来越关注,所以做了一些对tab事件的理解及优化,望大家吻喷。效果图如下:

tab点击事件优化

二、tab实现的思路

1、首页是tab菜单及tab内容的理解是一一对应关系,而且位置是顺序是固定的也就是说当前第几个tab菜单对应的是第几个tab内容,这样是为了省略很多参数及不必要的HTML代码;

2、js控制tab菜单:对于tab菜单而言,只需要控制点击后的菜单为当前选中效果,然后其它的菜单则是默认的没有选中效果;

3、js控制tab内容:对于tab内容来说,根据tab菜单的顺序来控制当前需要显示的tab内容,主要是控制第几个tab内容显示,而其它tab内容则隐藏。

三、知识点使用技巧:

1、jq的引用,本文引用的是百度CND 的jq1.83版本(http://libs.baidu.com/jquery/1.8.3/jquery.min.js)当然自行选择不强求使用CDN的也可以下载至本地使用。

2、siblings的使用:经过查阅《jQuery 遍历 - siblings() 方法》得知可以用:

//查找每个 p 元素的所有类名为 "selected" 的所有同胞元素:
$("p").siblings(".selected");

有这个方法那就更方便了,点击前选中的菜单后,只需要去掉其它有当前选中后的菜单样式就行了,而不是每个都遍历一遍执行,这样一来从dom操作的角度来说减少了dom的操作也节省了内存,何乐而不为呢。

3、事件委托就是利用冒泡的原理,将原本应该添加在某些元素身上的监听事件,添加到其父元素身上,来达到提高性能的效果。

<div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
	</ul>  
</div>
<script>
window.onload = function(){  
    var ul = document.getElementsByTagName("ul")[0];  
    var liList = document.getElementsByTagName("li");  
    ul.onclick = function(e) {  
        var e = e || window.event;  
        var target = e.target || e.srcElement;  
        if(target.nodeName.toLowerCase() == "li") {  
            alert(target.innerHTML);  
        }  
    }  
}  
</script>

三、源代码实例

使用说明:最外部的tab_area样式是为了防止有多个tab出现在同一页面,这样可以防止多个tab出错,样式标签自定义(同步)

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

四、结语:

效果图及源代友已经附上,如果还有什么疑问可以与本人联系,或留言,知无不言。
(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭