还是关于 标记当前

写了一些前端效果之后,发现最常用的两个功能就是 标记当前,和选项卡了。
其实选项卡也是一种标记当前的形式,很多很多交互效果,其实用标记当前的方式就足矣搞定了,现在我们把脚本固定下来,大部分的事情还是留给CSS 去做,切换一个样式,是当前的元素具有标记的class,通过设置这个class控制的种种属性,就可以实现很多强大的效果。
其实熟练地掌握样式是实现很多效果的坚实基础,脚本只是起到画龙点睛的作用。下面贴一个标记当前的函数:

//javascript by trance
//
标记当前函数,第一个参数可以传递一个jQuery选择符,也可是jQuery对象 ,第二个参数是标记的class,默认"cur"也可自定义,第三个函数区分标签标记范围

function cur(ele,currentClass,tag){
        
var ele= $(ele) || ele;
        
var tag= tag || "";
        
var mark= currentClass || "cur";
        ele.addClass(mark).siblings(tag).removeClass(mark);
        }

//使用:
cur(".tobecured"); //标记需要被标记的 
cur($("#nav").find("a:first")); //标记某一个特殊的
cur($("#nav a:first"),"myClass"); //以自己定义的class标记标记特定元素
cur("li:last","myClass","li"); //以自己定义的class标记特定元素 并不影响li以外的其他兄弟元素
$("li").click(function(){ cur(this);}) //点击标记当前
$("#tab li").mouseover( function(){ cur(this,"hover");} ).click( function(){ cur(this,"marked");}) //实现
tab标签的三种状态
$("tr").mouseover( function(){cur(this,"hover")})  //表格划过变色
$("li").mouseover(function(){ cur($(this).next("div"));})  //划过标记当前元素下一个div ........ 

利用这个函数,就已经能做很多的事情了。

posted on 2009-07-27 14:18  trance  阅读(224)  评论(0编辑  收藏  举报

导航