ABROAD：HTML+CSS+JS打造简单标签效果

tinyq 发布于2019-08-28 17:54 / 3431人阅读

摘要：之前复制了好久，打强调字也打了好久。。。还是写一下文章同步自大超超在思考。

写ABROAD项目用到了标签这个东东，其实标签在WEB上到处可见，图中就依次显示了DCC文章发布器、ABROAD后台添加数据、百度图片搜索、sf发布博客文章时贴标签的样式——标签就像浏览器里原生的checkbox一样，不过checkbox实在太丑了，就使用这个简单方法美化一下好了。

1、HTML代码：


    经济、金融类
    行政、人资类
    市场、销售类
    电子工程IT类
    工程类
    生物医药类
    物理、化学类
    广告、传媒类
    语言、翻译类

2、CSS代码（颜色、字体大小、间距自行调整）：

/* 标签样式 */
.tags span {
    font: 12px/22px "Microsoft Yahei",Arial,Lucida Grande,Tahoma;
    border: 1px #E3E0D9 solid;
    display: inline-block;
    height: 20px;
    background: #FFF;
    text-align: center;
    padding: 2px 7px;
    margin: 1px 4px;
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    overflow: hidden;
    color: #989898;
}
.tags span:hover {
    border-color: #00956d;
}
.tags span.active {
    color: #FFF;
    border-color: #00956d;
    background-color: #00956d;
}

3、JS代码（代码也是根据自己的需求提取数据；原谅我放荡不羁使用了jquery库~）：

// 绑定标签点击事件 @ 2014-01-29 21:57:26
$(".tags span").on("click", function(){
    $(this).toggleClass("active");
});
 
// 读取标签数据时 @ 2014-01-29 23:12:35
var tag_content = ",";
$(".tags span").each(function(k, v) {
    if($(v).hasClass("active")){
        tag_content += $(v).text()+",";
    }
});
if( tag_content=="," ){
    alert("请至少选择一个专业标签");
    return;
}

尼妹！！原来markdown支持直接写html代码。。。。之前复制了好久，打强调字也打了好久。。。
好吧。。。
还是写一下文章同步自：大超超在思考。

GPU云服务器云服务器 html标签渐变效果气球css js效果 html入门简单标签 js和css效果图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110883.html

ABROAD：HTML+CSS+JS打造简单标签效果

摘要：之前复制了好久，打强调字也打了好久。。。还是写一下文章同步自大超超在思考。 showImg(http://segmentfault.com/img/bVbQyG); 写ABROAD项目用到了标签这个东东，其实标签在WEB上到处可见，图中就依次显示了DCC文章发布器、ABROAD后台添加数据、百度图片搜索、sf发布博客文章时贴标签的样式——标签就像浏览器里原生的checkbo...

light 2019-08-21 12:09 评论0 收藏0
打造一个“精致的”个人博客

摘要：百度统计先注册个百度统计的账号站长账号，适合个人博客，注册成功后按照提示，把代码复制到中的的标签里这里特指我的博客文件好了，这样你的博客就差不多了，是不是感觉很酷今天就到这儿，下篇文章见。我为什么要写博客？其实我最初打算写博客，原因很简单，我就是想把工作中、学习中遇到的问题及解决方案记录下来，它能帮你梳理下整个过程的要注意的地方，写写你在工作中遇到的问题，用来记录和回顾。Tips:...

用户83 2019-08-22 10:46 评论0 收藏0
CSS相关文章

摘要：如何用获取虚拟键盘高度前端早读课月号早读文章由汤谷投稿分享。大杀器和把动画转换成原生动画初来乍到，本文搬运自我月份在知乎发的文章。前端面试之 CSS3 新特性除了 HTML5 的新特性，CSS3 的新特性也是面试中经常被问到的。如何用 js 获取虚拟键盘高度？-前端早读课 9月7号早读文章由@汤谷投稿分享。正文从这开始～这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题...

FrozenMap 2019-08-29 14:21 评论0 收藏0
ABROAD：将系统的VC模式扩展为MVC模式

摘要：规范首先从框架规范起将不规范的模式扩展为较为规范的模式，再就是平时写代码时命名数据库设计命名文件夹命名等规范，还有诸如语句书写的规范关键词大写表名和字段名用标识等，感谢大神小志公子和转啊转提醒。就拿的图做文章的配图啦，力顶。 ABROAD项目好久没写文章了，放了太久，这次要开始发力完成它了！在项目停滞的这一两个月里，又学习了很多新东西，特别是最近加入了一个开发者社区（请戳http:...

taoszu 2019-06-27 10:35 评论0 收藏0