一款很实用的js输入关键词生成标签代码，输入关键词创建个人技能标签，不需要的还可以删除。
js代码
<scripttype="text/javascript">
vartagcon=$("tagcon");
varaddBox=$("addBox");
varaddBtn=addBox.children[1];
varintxt=addBox.children[0];
vardivs=tagcon.children;function$(id){returndocument.getElementById(id)}//$获取元素函数封装
functioncrele(ele){returndocument.createElement(ele);}//创建元素
functionadson(father,son1,son2,son3,clas1,clas2,clas3,clas4,con1,con2){
father.appendChild(son1);
father.appendChild(son2);
father.appendChild(son3);
father.className=clas1;
son1.className=clas2;
son2.className=clas3;
son3.className=clas4;
son1.innerHTML=con1;
son3.innerHTML=con2;
}
//输入框聚焦和失焦的效果
intxt.onfocus=function(){
intxt.style.backgroundColor="#fff";
}
intxt.onblur=function(){
intxt.style.backgroundColor="#e3e3e3";
}
//点击add按钮添加标签
addBtn.onclick=function(){
if(intxt.value!=""){
varnewdiv=crele("div");
varnewem=crele("em");
varnewspan=crele("span");
varnewa=crele("a");
if(divs.length==0){//最新添加的标签在最前边
tagcon.appendChild(newdiv);
}else{
tagcon.insertBefore(newdiv,divs[0])
}
adson(newdiv,newem,newspan,newa,"tag","tagtxt","move","closetag",intxt.value,"×")
intxt.value="";
}else{
alert("你还没有输入呢！");
}
//console.log(links.length);
newa.onclick=function(){
this.parentNode.style.display="none";
}
}
</script>
下载
|
|
置顶卡
变色卡