js+css 简单的高亮选中对象[转帖]_Tomcat, WebLogic及J2EE讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛

总帖数

每页帖数

1/1页

返回列表

发起投票

查看: 3517 | 回复: 0

主题： js+css 简单的高亮选中对象[转帖]

jfl

注册用户

等级：少校
经验：1112
发帖：95
精华：0
注册：2012-8-10
状态：离线
发送短消息息给jfl

加好友发送短消息息给jfl

发消息

发表于：

2012-8-24 9:36:34 | [全部帖] [楼主帖]

楼主

功能：
点击列表中的对象时，为选中对象加上边框（高亮显示）。

实现过程：
1.为每个对象指定css名称：mycss
2.定义两个css，一个overcss，一个outcss
3.通过mycss为每个对象绑定mouseover，mouseout，click三个事件的处理，在处理中操作css从而实现选中对象时的高亮显示。

注：本文使用了jquery用于方便定位对象。

以下是sample：

Js代码

$(".myclip-item-link").mouseover(function() {
// 鼠标移到超链接上时，加上边框
$(this).addClass("myclip-item-over");
}).mouseout(function() {
// 鼠标移出超链接时，去掉边框
$(this).removeClass("myclip-item-over");
}).click(function(){
// 点击超链接后，加上高亮边框（同时去掉其它超链接的高亮边框）
$(".myclip-item-link").removeClass("myclip-item-highlight");
$(this).addClass("myclip-item-highlight");
});

$(".myclip-item-link").mouseover(function() {
       // 鼠标移到超链接上时，加上边框
       $(this).addClass("myclip-item-over");
}).mouseout(function() {
// 鼠标移出超链接时，去掉边框
$(this).removeClass("myclip-item-over");
}).click(function(){
       // 点击超链接后，加上高亮边框（同时去掉其它超链接的高亮边框）
       $(".myclip-item-link").removeClass("myclip-item-highlight");
       $(this).addClass("myclip-item-highlight");
});

Html代码