<script type="text/javascript">
if (typeof $ == "undefined") {
var $ = function(sid) {
if (typeof sid == "string") {
return document.getElementById(sid);
}
return sid;
};
}
var HighLightLink = function() {
var CUR_LINK = null; //记录当前链接的变量
var selectCurLink = function() {
if(CUR_LINK) {
CUR_LINK.style.cssText = "background:transparent";
}
this.style.cssText = "background:#fff0cc;padding:6px;";
CUR_LINK = this;
};
//初始化事件,cid:包含链接的外层容器id
var init = function(cid) {
var links = $(cid).getElementsByTagName("a");
for(var i = links.length - 1; i >= 0; i--) {
links[i].onclick = selectCurLink;
}
};
return {init:init};
}();
</script>
<div id="xian" class="xian"><a href="#" class="king STYLE1">奥运</a> <a href="#" class="king">NBA</a> <a href="#" class="king">功夫之王</a> <a href="#" class="king">火影忍者</a> <a href="#" class="king">雪在烧</a></div>
<script>
HighLightLink.init("xian");
</script>
应同事请求写的一段代码,功能没什么问题,就是感觉反应特别慢,不知道为什么。下面的是刚开始的写法。
var HighLightLink = function() {
var CUR_LINK = null;
function selectCurLink(event) {
var target = window.event? window.event.srcElement : event.target;
if(target && target.tagName && target.tagName.toLowerCase() == "a") {
if(target) {
if(CUR_LINK) {
CUR_LINK.style.cssText = "background:transparent";
}
target.style.cssText = "background:#fff0cc";
CUR_LINK = target;
}
}
}
return {selectCurLink:selectCurLink};
}();
<div onclick="HighLightLink.selectCurLink(event);" class="xian"><a href="#" class="king">IDS</a><a href="#">WCM</a></div>
分享到:
- 2008-05-04 16:04
- 浏览 1525
- 评论(0)
- 论坛回复 / 浏览 (0 / 2423)
- 查看更多
相关推荐
本项目"css3美化单选按钮点击选中动画特效"旨在通过CSS3技术实现一个吸引用户的交互体验,让原本单调的单选按钮在用户点击选中时展现出独特的视觉效果。 首先,我们需要了解HTML中的单选按钮元素。在HTML中,`...
在这个"jQuery点击选中列表样式代码.zip"压缩包中,包含了一个实现列表项点击选中效果的示例。这个效果常用于表单按钮或交互式列表,以提升用户体验。 首先,我们要理解"JS特效-表单按钮"这个标签。在网页设计中,...
在实现图片选中效果时,JQuery提供了便利的方法,如`click()`用于响应点击事件,`addClass()`和`removeClass()`用于添加或移除CSS类,从而改变图片的状态。 **Div+CSS** 是构建网页布局的基本元素,`div`是一个HTML...
现在,我们可以编写jQuery代码来实现点击选中效果。这里我们将使用`click()`函数来监听列表项的点击事件,并使用`toggleClass()`来切换选中状态的CSS类。假设我们有一个名为`selected`的CSS类,用于表示选中状态,...
本示例"Three.js的物体点击选中拾取DEMO"旨在演示如何实现用户通过鼠标点击屏幕上的3D物体并进行选中操作。这在创建交互式3D应用、游戏或可视化项目时非常有用。下面将详细介绍这一功能的实现原理和步骤。 首先,...
3) 以及如何实现item的点击选中效果。 首先,我们来探讨ListView的item子控件删除功能。在ListView的每个item通常包含多个视图元素,比如TextView、ImageView等。如果想要删除某个子控件,你需要在适配器(Adapter)...
为了显示选中效果,可以为列表项创建两种不同的状态样式(例如,通过设置背景颜色或边框)。在`onBindViewHolder()`中,根据条目是否被选中,设置相应的样式。 9. **处理多选模式** 如果需要实现多选,可以使用`...
这就是实现Vue点击追加选中样式效果的基本步骤。 总的来说,Vue.js的响应式数据绑定和事件处理机制使得实现这种交互效果变得简单。通过将样式与数据状态关联,我们可以轻松地根据应用的状态更新界面。这个例子展示...
div添加选中效果,及移动,改变大小鼠标形状变化
标题"listview保留选中效果2"表明我们要探讨的是如何在ListView滚动时仍能保持所选项目的高亮状态,即选中效果不因滚动而消失。描述中的"listview保留选中效果2"进一步强调了这是对之前讨论的延续或改进。 要实现...
今天,我们将讨论如何使用 React 实现点击选中的 LI 高亮效果。在这个示例中,我们将创建一个简单的目录列表,并实现点击某个目录项时,该项高亮的效果。 知识点一:使用 state 存储当前索引 在 React 中,我们...
"ListView保留item选中效果"这个主题正是针对这个问题,旨在探讨如何在ListView滚动时保持选中项的状态。 首先,我们要理解ListView的工作原理。ListView通过复用视图(ViewHolder模式)来提高性能,这意味着当一个...
在CSS(层叠样式表)中,我们可以通过各种技术实现图片的选中效果,这在网页设计中是非常常见的一种交互体验。"css实现图片选中效果.rar"这个压缩包文件可能包含了一个示例,用于演示如何用CSS创建类似蓝色理想网站...
这个“Android网格布局选中效果”涉及到的核心是Adapter的使用以及如何实现选中状态的视觉反馈。接下来,我们将深入探讨这两个关键知识点。 首先,我们来了解**Android GridView**。GridView继承自AbsListView,它...
为了实现选中效果,我们需要关注两个主要方面:Item视图的状态改变和监听用户的点击事件。 1. **设置默认选中效果**: 默认情况下,ListView在选中某项时会自动高亮显示。你可以通过设置`android:listSelector`...
标题 "tr选中效果" 暗示我们讨论的是在HTML表格(`<table>`)中如何实现行选中效果的技术。在这个场景中,我们通常会利用CSS来改变被选中行的样式,或者通过JavaScript或jQuery来实现交互功能,如点击时高亮显示行。...
本示例中,我们关注的是"jQuery Table点击选中表格行变色代码",这是一个用于实现用户交互功能的常见需求,即当用户点击表格的某一行时,该行会高亮显示,以突出显示用户的当前选择。 首先,我们要理解jQuery的基本...
下面将详细解释如何使用GridView实现类似Gallery的功能,以及如何添加点击选中效果。 首先,我们需要理解GridView的基本用法。GridView继承自AbsListView,它的每个子项占据一个固定大小的单元格。在XML布局文件中...
本篇将深入探讨如何利用`TextView`结合背景设置(`selector`)来创建自定义的`Tab`选中效果。 首先,`TextView`本身并不直接支持`Tab`的选中效果,但我们可以通过它的属性和状态选择器(`selector`)来模拟这一功能...
在UE4和UE5引擎中,为模型实现鼠标点击选中边缘高亮的功能是一项常见的交互设计,这可以增强用户在虚拟环境中的体验感。以下是如何实现这一功能的详细步骤: 一、创建UE5的第一人称工程 首先,我们需要启动Unreal ...