细微处提高tab标签鼠标效果的用户体验

细微处提高tab标签鼠标效果的用户体验

Tab标签的切换效果在网页里几乎是无所不在，只要做网站，就会有这个效果，当然，我不是想谈怎么去实现它（代码网上一抓一大把，水平参差不齐）

讨论：Tab效果，实现切换是鼠标经过切换好还是鼠标点击切换好？

从用户的使用角度来讲，通过越少的动作能达到获得更多的信息才是更好的，那么可以说鼠标经过就切换比鼠标点击要好。

附：

现
在网站上这种标签样的东西非常多，也经常会给人迷惑感，设计做出来看上去是标签，点击以后却直接打开一个新页面，或者转跳，也许这不是浏览者的意愿，（这
让我想起了很多论坛，或者新闻，在首页新闻里看到的明明是条新闻标题，点击以后进入的不是新闻，而是新闻的栏目首页，让我顿刻有受骗的感觉）所以点击效果
的tab，只有用户不在乎是否跳转他才肯定的去点击。

提升用户体验：既然鼠标经过的效果好，有什么细微之处可以提高？

说到这个问题，还是那天客户提出的要求让我感觉到确实是个很细微的地方 ，

页面如：侏罗纪软件的首页：http://www.jurassic.com.cn/



他的下方有个tab切换的效果，当看到这个效果的时候，我当然就按平时的做法（具体不说了）马上做好，效果无非是鼠标放上去切换，代码上，如果客户要求鼠标是点击效果，只需要将mouseover改成click，然后里面的执行代码就一样一样。

但挑剔的客户客户突然提出：这个Tab效果切换的太快了，鼠标随便划拉一下就切换，感觉太灵敏了。

心
里暗骂客户真是事儿多，但无奈还是改，将切换代码写成函数，再用settimeout来延迟400毫秒来实现切换的函数，改完这步，感觉是延迟了，但鼠标
滑过每个标签还是切换，只是推迟函数执行，改变它，小问题！在mouseout里加个cleartimeout，这样，用户在Tab标签上鼠标停留时间不
超过400毫秒的滑过，就不会引起tab内容的切换，这样真的就避免了无意的鼠标滑过引起切换。改完以后感觉客户的要求确实是对的，

虽然只是
细微的一步，细微到我做了这么久的Tab效果都已经烂熟烂抄的效果，而没有注意过这个问题，细微到很多人在浏览网站上重来没有感觉到这是需要处理才能更好
实现的效果（做完后又去看了一些门户和其他网站的Tab切换，发现很多切换都做了细微的延迟处理，以前怎么没有发现这个问题）.

改完后，由于Tab标签上，客户没有要求加链接，干脆再加上一个点击效果，完成后就是点击直接切换，或者鼠标在标签上稍微停顿切换内容，这样算是用户体验达到了很好的提升，兼顾了各种用户习惯。

后感后言

一个优良的代码应该具备哪些条件，总结应该如下（自己的一些看法）：

1，兼容能力强，逻辑合理，结构优化，执行效率高

能为更多的情况考虑，减少DOM访问，将代码尽量用于逻辑及自定义操作(这个和js网页脚本开发特点有关)，多写几行甚至几十行代码是很值得的。

2，易读性，模块化，

所
谓易读性，当然首先要有良好的代码习惯，书写习惯以及尽量在需要的地方留有注解说明，模块化的代码更便于调用，和避免同样的效果，仅仅是因为对象的id，
class，标签名称而反复写，所以应该说，更推崇脚本库的使用，库不是万能的，但是有了库确实简化了很多不了解而需要很多步骤去实现的代码，或者不需要
的重复代码。

3，扩展能力强，易于以后不可预料的修改，

扩展和易于维护，这个更应该在代码结构上，从一开始就想好，当然这个和自身水平以及经验有很多关系.

同样的，我认为以上几点也适用于web标准页面的书写，好的web页面代码应该充分掌握网站结构的特点，定义样式或者html代码的结构应该从整站出发，而只考虑当前页面，当前模块，往往我们会多写出许多重复的代码，重复的样式，而到最后自己也被绕糊涂了

Tab关键代码展示

function tabChange(tabHead,headAddClass,tabBox,boxAddClass){

var timeout;

function eachClass(){

jQuery(tabHead).each(function(i){

jQuery(tabHead).eq(i).removeClass(headAddClass);

jQuery(tabBox).eq(i).removeClass(boxAddClass);

});

}

window.addClass = function(a){

eachClass();

jQuery(tabHead).eq(a).addClass(headAddClass);

jQuery(tabBox).eq(a).addClass(boxAddClass);

}

jQuery(tabHead).each(function(i){

jQuery(tabHead).eq(i).mouseover(function(){

timeout =setTimeout("addClass("+i+")", 400);

});

jQuery(tabHead).eq(i).mouseout(function(){

clearTimeout(timeout);

});

jQuery(tabHead).eq(i).click(function(){

addClass(i);

return false;

});

});