登录

简单代码实现多彩tag标签

我相信很多朋友都喜欢在博客的右侧安排一个区块来放置网站的tag标签,对于做SEO的博主们来说,这可以起到很好的SEO作用,但是想要tag标签更漂亮怎么办?一般普遍的做法是利用js+css来实现,以下以zblog为例。

多彩tag.PNG

例如:代码如下

<script type="text/javascript"> 
    $(document).ready(function() { 
        var tags_a = $("#tags a"); 
        tags_a.each(function(){ 
        var x = 9; 
        var y = 0; 
        var rand = parseInt(Math.random() * (x - y + 1) + y); 
        $(this).addClass("tags"+rand); }); 
    })  
</script>
#tag .tags0{background-color: #CC3300;}
#tag .tags1{background-color: #CC3300;}
#tag .tags2{background-color: #339900;}
#tag .tags3{background-color: #FF9933;}
#tag .tags4{background-color: #0099CC;}
#tag .tags5{background-color: #00CCCC;}
#tag .tags6{background-color: #99CC66;}
#tag .tags7{background-color: #339999;}
#tag .tags8{background-color: #FF6699;}
#tag a:hover{color:#FFFFFF;text-decoration:none;background-color: #4097db;}

以上方式能够实现多彩tag,但像小编这样懒的人,写这么多的css颜色样式,实在有点太为难,所以下面列出小编所用的方式

js代码

 $('#tags a').each(function(){
     var tagcolor=new Array("#C01E22","#0088cc","#FF5E52","#2CDB87","#00D6AC","#EA84FF","#FDAC5F","#FD77B2","#0DAAEA","#C38CFF","#FF926F","#8AC78F","#C7C183","#9370DB","#2f889a","#9e5ae2");
     var cou=Math.floor(Math.random()*tagcolor.length+1)-1;
     $(this).css({
         'color':tabcolor[cou]
     })
  })

此种方式是直接将css样式内联进HTML代码中,以上两种方式随意选择,不懂修改的小白请联系小编

邮箱:zbpblog626#163.com //发送邮件时请将#手动改为@

选择赏赐方式:

×

多少都是心意,感谢大家

选择分享方式:

×

扫一扫分享到微信朋友圈

标签: 多彩tag

本文标题:简单代码实现多彩tag标签

本文地址:https://www.zbpnice.cn/post/158.html

温馨提示:文章内容系作者个人观点,不代表柏平博客对观点赞同或支持。

版权声明: 本文为原创文章,创建于6年前 (2018-03-06),版权归 柏平 所有,欢迎分享本文,转载请保留出处!

评论列表 :共有3人吐槽, 5192人围观

访客
访客  4年前 (2019-11-22)  板凳回复
模板拿走
柏平
柏平  4年前 (2019-11-22) 1层回复
@访客 ???
付费阅读
付费阅读  6年前 (2018-03-29)  沙发回复
非常不错啊,感谢无私的分享!

发表评论: