input输入框获取js点击文字内容特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 input输入框获取js点击文字内容特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>input输入框获取js点击文字内容</title>
<style>
.c{ width:100px; height:25px; line-height:25px; text-align:center; border:1px solid #eee; margin:5px; float:left; font-size:12px; cursor:pointer}
.lanrenzhijia{ width:800px; height:auto; margin:0 auto;}
</style>
</head>

<body>
<div class="lanrenzhijia">
<div class="c" id="c0">菜单导航</div>
<div class="c" id="c1">时间日期</div>
<div class="c" id="c2">焦点图</div>
<div class="c" id="c3">tab标签</div>
<div class="c" id="c4">jquery特效</div>
<div class="c" id="c5">在线客服</div>
<div class="c" id="c6">在线客服</div>
<input id="i" type="text" style="width:720px; height:25px; border:1px solid #ccc"/>
</div>
<script>
    var x = ["菜单导航", "时间日期", "焦点图", "tab标签", "jquery特效", "在线客服", "在线客服"];
var y=[];
function $(id){ 
	return document.getElementById(id)
};
for(var i=0,m=x.length;i<m;i++){
	$("c"+i).onclick=(function(i){
	return function(){
		var s=y.join(",").indexOf(x[i]);
		if(s>=0){
		for(var r in y){
		if(y[r]==x[i]){y.splice(r,1)}
		}
		}
		else{
		y.push(x[i])
		}
		$("i").value=y.join(" ");
	}
})
(i)
}
</script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)