网页制作教程

图片等比例放大和缩小的代码

怎么实现滚屏无刷新动态加载内容

insertAdjacentHTML动态插入内容的使用方法

jquery获取值和控制值操作大全

现在的位置: 网页制作教程＞ JS网页特效＞正文

Tag标签选择器，点击标签自动赋值给输入框

发表于2016/11/17 ⁄ JS网页特效 ⁄ 0条评论 ⁄ 热度 4,218℃

在优酷的视频编辑里，有一个标签功能，系统会自动地优选几个标签排列在一起，供用户选择，用户点击哪个，对应标签就显示到输入框内，这样的好处是省去用户输入的麻烦。

我们称这叫标签选择器，那么这种点击文字标签就赋值到文本框的功能是如何实现的呢？请参考下面代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS标签选择器，点击文字标签赋值给输入框</title>
<style>
.c{ width:100px; height:25px; line-height:25px; text-align:center; border:1px solid #eee; margin:10px; float:left; font-size:12px; cursor:pointer }
</style>
</head>
<body>
<div align="center">
<div class="c" id="c0">网有卖</div>
<div class="c" id="c1">ASP</div>
<div class="c" id="c2">PHP</div>
<div class="c" id="c3">JSP</div>
<div class="c" id="c4">NET</div>
<div class="c" id="c5">HTML</div>
<div class="c" id="c6">网站源码</div>
<input id="i" type="text" style="width:720px; height:25px; border:1px solid #ccc"/>
<script>
var x=["网有卖","ASP","PHP","JSP","NET","HTML","网站源码webym.net"];
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>
</div>
<br><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.webym.net" target="_blank">源码网</a>丨www.webym.net 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：网有卖</font></p>
</body>
</html>

运行代码提示：您可以先修改部分代码再运行。

关于Tag标签选择就分享到这里，如果帮到你请收藏本站。

声明:如需转载，请注明来源于www.webym.net并保留原文链接：http://www.webym.net/jiaocheng/216.html