威言威语

JQuery+CSS实现分类名称前面不一样的可自定义的图标，通过Jquery获取连接a标签中的title里面的内容，然后通过CSS进行针对性的定义就能达到我们想要的效果。

『Weisay Heibai』发布之后，就有朋友说为什么他们的博客独立页面标题前面没有像我那样的小图标，因为每个给自己独立页面取的名字不同，所以我无法统一的定义样式，所以我就去掉了那个功能。

最近很多朋友问我这个功能是怎么实现的，希望我能写个教程，让他们根据自己的实际情况自己添加，于是今天我就简单的说一下。

其实这个也不复杂，通过Jquery获取连接a标签中的title里面的内容，然后通过CSS进行针对性的定义就能达到我们想要的效果。

首先是加载Jquery库，这个我想大家都是知道的。

JQuery代码：

    jQuery(document).ready(function(){
         jQuery('ul.navi li a').addClass(function() { return jQuery(this).attr('title'); });
    });

核心CSS代码：

.navi li a.首页 {
    background: url("images/home.png") no-repeat scroll 0 0 transparent;
    display: block;
    padding-left: 21px;
}
.navi li a.首页:hover {
    background-position: 0 -17px;
    border-bottom: 1px dotted #535353;
    color: #535353;
}
.navi li a.关于 {
    background: url("images/about.png") no-repeat scroll 0 0 transparent;
    display: block;
    padding-left: 21px;
}
.navi li a.关于:hover {
    background-position: 0 -16px;
    border-bottom: 1px dotted #535353;
    color: #535353;
}
.navi li a.留言 {
    background: url("images/contact.png") no-repeat scroll 0 1px transparent;
    display: block;
    padding-left: 21px;
}
.navi li a.留言:hover {
    background-position: 0 -14px;
    border-bottom: 1px dotted #535353;
    color: #535353;
}
.navi li a.链接 {
    background: url("images/link.png") no-repeat scroll 0 0 transparent;
    display: block;
    padding-left: 21px;
}
.navi li a.链接:hover {
    background-position: 0 -17px;
    border-bottom: 1px dotted #535353;
    color: #535353;
}
.navi li a.归档 {
    background: url("images/archive.png") no-repeat scroll 1px 2px transparent;
    display: block;
    padding-left: 21px;
}
.navi li a.归档:hover {
    background-position: 1px -14px;
    border-bottom: 1px dotted #535353;
    color: #535353;
}

Html代码：

</pre>
<div class="pagemenu">
<ul class="navi">
	<li><a title="首页" href="https://www.weisay.com/blog/">首页1</a></li>
	<li><a title="关于" href="https://www.weisay.com/blog/about">关于1</a></li>
	<li><a title="归档" href="https://www.weisay.com/blog/archives">归档1</a></li>
	<li><a title="留言" href="https://www.weisay.com/blog/guestbook">留言1</a></li>
	<li><a title="链接" href="https://www.weisay.com/blog/link">链接1</a></li>
</ul>
</div>
<pre>

Jqyery代码中的ul.navi li a 要跟div中对应；为了区分分类名字与title，我特地将分类名字后面加1区分，我们要的title里面的，然后通过CSS针对性的定义的。

大家看到这里用中文是不是感觉有点奇怪，一般用到中文的好像只是在字体中，比如：微软雅黑，宋体，其实其他地方也是可以使用中文定义的。

title里面是什么，上面的css中就对应什么，我想大家这么聪明，应该很快就能明白我说的。

演示地址：

VIEW DEMO