资讯专栏INFORMATION COLUMN

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

tinyq / 3424人阅读

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

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代码。。。。之前复制了好久,打强调字也打了好久。。。
好吧。。。
还是写一下文章同步自:大超超在思考。

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

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

相关文章

  • ABROADHTML+CSS+JS打造简单标签效果

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

    light 评论0 收藏0
  • 打造一个“精致的”个人博客

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

    用户83 评论0 收藏0
  • CSS相关文章

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

    FrozenMap 评论0 收藏0
  • ABROAD:将系统的VC模式扩展为MVC模式

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

    taoszu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<