编程练习--简单实用的选项卡切换效果

有网友私信我，说我前几篇写编程练习的例子让他们感觉我写代码的方式和他们不一样，让他们很受启发，希望我多写一些这样的例子。他们帮我总结了一下，主要表现在以下三个方面：

1. 代码外观整洁清爽。

2.喜欢用对象方式编写。

3.喜欢用原生javascript。

我非常认同上面三点，事实上我也是坚持这么做的。第1点自不必说，爱美之心，人皆有之。我想没有一个人愿意看排的凌乱不甚的代码的。第2点呢，我个人认为好处就很多了，最直接的好处就是可以更好的组织代码，使各功能模块之间即独立又相互协调，也方便扩展和维护。第3条呢是因为我目前的工作环境是移动客户端的前端开发，一般只要兼容webkite内核的浏览器就可以了，用原生的方法写可以使代码写的短小精悍，同时也可以把更多的观注点放在业务逻辑上。

常言道，拳不离手，曲不离口，技术都是熟能生巧，不能懈怠。有时候在网上看到一些好的例子，觉得或许以后会用的上，于是拿来自己改写下。选项卡在web应用中很常见，实现的方式也是多种多样。下面这一款，就是利用javascript和css实现的，效果图如下：

在线演示：http://runjs.cn/code/r8kqphjl

经过我的改写之后。调用非常简单：

//实例化选项卡
var op = new Tabs('menu');

只要传入选项卡节点的id就可以了。下面是js代码：

/*** 选项卡类* @param {string} id 选项卡的ID*/
function Tabs(id){var node = document.querySelector('#'+id);var selected = node.querySelector('.selected');this.selected = selected;this.node = node;this.bindEvent();
}/*** 切换选项卡* @param  {object} event 事件* @return {[type]}   [description]*/
Tabs.prototype.change = function(event){var element = event.target;if(element.tagName.toLowerCase()=='li'){if(element.className=='selected'){return;}}else{while(element != this.node){element = element.parentNode;if(element.tagName.toLowerCase()=='li'){break;}}}this.selected.removeAttribute('class');element.className = 'selected';this.selected = element;
}/*** 绑定事件* @return {[type]} [description]*/
Tabs.prototype.bindEvent = function(){this.node.addEventListener('click',this.change.bind(this),false)
}

大家看到，我没有用jquery,因为我专注的重点在于实现的逻辑，一共三个部分：先是初始化，然后是切换功能，最后是事件绑定。我们再来看看原来的代码：

$(function(){
$("li").on("click", function(){$("LI").removeClass("selected");$(this).toggleClass("selected", true);
})
});

我看到原来的代码里边，是用$('li').on这样的表达式配合循环遍历去做的。虽然看起来代码少，但实际上隐藏在$下面的代码量一点都不少。这还不是重点，重要的是这样相当于是每一个li上都绑定一个同样的操作，而且每一次切换都相当于更新了每一个li的样式。读过jquery源码的人都知道，$("li")实际上是得到一个集合，内部是循环去检查每一个li，判断它是不是有选中的样式，如果有就拿掉，然后把当前点中项加上选中样式。用的时候感觉爽，实际上非常的低效。

如果我们把整个选项卡看成是一个对象，那么每一个选项就像是这个对象上的一部分，初始化的时候，就让对象保存好每一个选项的状态，哪一个选项是选中的，它内部自然是应当知道的。当我们切换的时候，只要更新对象具体的状态值就行，根本不需要去一个一个的遍历。就像老师在黑板上板书一样，他知道哪一块要保留，哪一块要擦掉。不需每写一次就把黑板全部擦一次。

好了，我知道又会有朋友要吐槽我的比喻了。我做好准备了，爱吐糟的你在哪里？

转载于:https://www.cnblogs.com/afrog/p/4098118.html

编程练习--简单实用的选项卡切换效果相关推荐

Tab选项卡切换效果JavaScript汇总
tab切换在现在的网页上,真是十分的常用呀.但是tab切换的JavaScript实现却有很多需要注意的地方,如何用最少的代码,最灵活的实现.这里收集了37个tab实现的JavaScript代码,在此备 ...
tabs选项卡切换效果（jquery版）
以前写过一篇 tabs选项卡切换效果,不过是用原生 javascript 写的,最近在学习 jquery,今天抽空用 jquery 重写了这个效果. 效果图如下: html 代码如下: <!DO ...
vue 选项卡可以滑动_vue实现选项卡及选项卡切换效果
这里不跟大家再去把Vue文档上的一些指令用法或者基础知识再复述一遍,既然是从入门到实战,我直接将平时项目中需要实现的一些效果拆分成模块.你们遇到了相关的指令或者不知道怎么用的方法自己对着文档去查,再回 ...
android 页卡切换实现,TabLayout+ViewPager实现选项卡切换效果
原来项目中一直使用tabhost做切换效果,最近在整理代码,决定放弃tabhost,使用google自带的切换布局TabLayout . 其实TabLayout实现切换效果还是蛮简单的,跟tabpag ...
Java做图片自动切换,简单的图片自动切换效果实现
我们经常看见很多软件有图片自动切换的效果,看上去很高大上.其实做一个简单的效果很简单,用ViewPager实现先是简单的布局文件 xmlns:tools="http://schemas.a ...
简单实用的图片边框效果
图片的边框可以随鼠标动作(hover)改变样式,而且边框跟图片需要有一定距离--很简单的效果,却被一个莫名其妙的问题困扰了好几天,经典论坛上的hutia朋友给出的解决方法是加上padding:6px; ...
qt tablewidget 实现tab来回切换_原生JS实现TAB选项卡切换效果
插件化写法: HTML: tab1 tab2 tab3 tab4 tab5 页面1 页面2 页面3 页面4 页面5 css: .wrap{height:500px;width:80%;margin:5 ...
[分享]多个选项卡切换效果
实现的效果图: 鼠标经过选项卡,弹出相对应的内容,选项卡个数不限: 1.html <div class="box" id="box"> <dl ...
JavaScript 实例：当当网首页选项卡切换效果
关键代码: <script type="text/javascript"> function showMe(index) {//book_type_out是类名,类名绑 ...

编程练习--简单实用的选项卡切换效果

编程练习--简单实用的选项卡切换效果相关推荐

最新文章

热门文章