论坛首页 Web前端技术论坛

点击选中效果

浏览 2423 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2008-05-04  
		<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>

 

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics