看到蓝色理想上有人问这个效果,而且刚好项目不是那么紧张,所以就简单的写了一个效果,也是基于 jQuery 的,关于具体的应用可以看下 Alibaba 中国站右上角的搜索框的效果即可,好了,废话少说,上代码,还是放到最后吧。坚持传统。什么是传统,我也不知道,额。

先是 HTML 的结构,其实这里完全不用 这么多 id 的,只是为了少输入字符,代码每个字都是键盘输入,不能怪我懒,还有,如果你有好的自动补全的文本编辑器,不妨推荐下,注意啊,是文本编辑器,言归正传,对于 id 和 class 的使用,还是适可而止,不要学我啊。当然,怎么个适可而止法,不是本文的重点,那就略过。

<div id="a">
	<div id="b">
		<span>O</span><span>P</span><span>Q</span><span style="display:none;" class="current new"></span>
	</div>
	<div id="c">
		<div class="relative">R</div>
		<div class="absolute">
			<span>S</span><span>T</span><span>U</span><span>V</span>
		</div>
	</div>
</div>

#a是大框架,里面包括 #b 和 #c ,#b 是已经显示在搜索框上部的,当然最后一个 span 让其先隐藏,是为了将来将点击的项目 替换 到这里。#c 除了 .relative 显示之外,其他的例如 .absolute 都叫它隐藏,为的是鼠标移上去他才可以显示。

然后是 CSS 代码,写的不好不要嘲笑,刚入门,见谅,并且指导,或者交流。

	<style>
		body {
			width:400px;
			margin:100px auto 0 auto;
		}
		#a {
			width:400px;
		}
		#b,#c {
			float:left;
		}
		#b span, #c span,.relative {
			display:block;
			width:60px;
			height:30px;
			line-height:30px;
			background:#ccc;
			margin:0 5px;
			text-align:center;
			cursor:pointer;
		}
		#b span {
			float:left;
		}
		#c span,.relative {
			margin-bottom:2px;
		}
		.absolute {
			display:none;
		}
		.current {
			border-bottom:2px solid red;
		}
	</style>

这里就是让显示的显示,隐藏的隐藏,然后让两个.relative 和 .absolute 各就各位,也就是定好位子,这里叫布局,其实这个很简单,就是用了一个 float ,其他没有了。

然后是脚本,当然了,第一步还是引入 jQuery 库,这个不要我再写了吧,如果记不住,那就不用往下读了,直接到末尾拷贝代码吧,如果想记住,那就用手多输入几遍啊。

下面是 jQuery 代码,写的不好,见谅。

<script type="text/javascript">
$("#c").hover(function(){
	$(".absolute").show();
},function(){
	$(".absolute").hide();
});
$(".absolute>span").click(function(e){
	var $target = $(e.target);
	var text = $target.text();
	if ($(".new").text()) {
		var z = $(".new").text();
		$(".new").text("");
		$(".new").show().append(text);
		$target.text(z);
		$("span").removeClass("current");
		$(".new").addClass("current");
	}else {
		$target.remove();
		$(".new").show().append(text);
		$("span").removeClass("current");
		$(".new").addClass("current");
	}
});
$("#b>span").click(function(e){
	$("span").removeClass("current");
	var $target = $(e.target);
	$target.addClass("current");
})
</script>

主要是原理,代码没什么的。

先看前四行,就是数遍移上去之后,让隐藏的显示,然后鼠标移除后,让隐藏的继续隐藏,其实也就是让刚才显示的隐藏元素继续再隐他的藏。

.absolute>span, 找到 .absolute 下面的 span ,绑定单击事件 e 是参数,e.target 是 jQuery 中封装的被点击目标对象,text(); 获取被点击目标中的文字。

然后直接判断 .new 中是否有文字,有的话先把文字暂时存到 z 中,然后将这个 .new 中的文字清空,然后让他显示,并把刚才被点击对象的文字插入进去,然后再把被点击对象的文字用 z 替换下,最后将所有 span 的 current 样式删掉,再给 .new 添加 current 样式。

此处就是为什么要将那个隐藏的 span 付给 .new 和 .current 两个 class 呢,就是为了好找。最后那么样子删样式只是为了方便。

然后,又然后了,不要郁闷,我也不是很喜欢用这么多。

然后,如果 .new 中没有文字的话,那好办了,直接将被点击的对象的文字删掉,让后将其插入进 .new 中就好了,后面的删除,添加样式都一样。

最最然后,#b>span 也是找到 #b 中的 span ,当点击的时候,去掉所有 span 的 current 样式,然后再给被点击对象一个 current 样式。OK,完成了。

演示见了这里:点击看演示喽