『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中就对应什么，我想大家这么聪明，应该很快就能明白我说的。
阿哲:
牧泽:
wmtimes:
锋言锋语:
林三:
简单生活:
严重浪漫:
我就悲剧了，因为我一点都不懂。现在想弄上去都不会。搞了半天也没得！有哪位可以教教？
其实你用这种方法更省事a[title*=””]，只是不兼容ie6而已，你这样写的话，执行效率有点低。
这效率确实低了点，IE6太悲剧了点
觉得没必要太考虑ie6，不要为了兼容而兼容，只要ie6不影响浏览就行了，不用做的浏览效果都一样。
weisaysimple 这个主题的改法一样？？
很实用，收藏一下～
过段时间需要用到～
对于刚刚开始的小白来说压力还是比较大
Html代码没有说怎么用 
只有首页有图标其他没有麻烦指点下
你把jquery代码放到header.php里面，你现在可能放index.php里面了。
向博主学习！不知道博主提供的jQuery代码是否是写在主题的header.php文件中呢？还有提供的CSS代码是否是写在主题的style.css中呢？麻烦了！
对于weisay heibai这个主题是这样就行了
你好,请问一下,是将上面的jQuery代码放在主题的header.php中,CSS代码放在主题的style.css中就可以实现了吗？
对于weisay heibai这个主题是这样就行了。
原来是这样的啊，学习了！
这用中文来写class我还真是头一次见啊。
我表示，完全看不懂，这些代码加在哪里，哪个什么什么库怎么加载。。。隔行如隔山啊，完全不懂。
Jquery库一般主题都有了，只要加上那段Jquery代码就行，css代码放到主题style.css里面。
这个技巧还不错～省的一个个设置class
其实呢跟家class一样，只是调用的title里面的东西，调用class也是一样
挺实用的小技巧
哈哈，有Jquery还是用这个好。
必然的，可以最大化的利用Jquery
教程能不能详细点吗，我是第一次接触wp，还是没看懂，谢谢！
话说我还真不知道还要再怎么详细了~
第一次看到css中竟然可以使用中文，长见识了！
哈哈，可以使用中文字体的。
学习一下！这样看起来更美观了！
稍稍个性了一点，不那么单调了
又来学习了 呵呵 ~！
这个皮肤我真是很喜欢啊，设计的太好了。
那就赶紧换成WP，哈哈
这个诱惑太大了，我还要考虑精力问题。
其实吧，博客只是平台，重要的还是文字，界面也是为内容服务的。
那个JQ代码要放在哪啊，我是小白，求指导！
放header上面，你可以查看我的演示地址里面的源文件就应该能明白了。
恩，已经折腾出来了，谢谢威哥
哈哈，自己整整下次折腾起来就快了
过来支持一下·a wei
我看到了 历史上的今天 这个，貌似在别的站没看到过
这是一个插件，就叫：历史上的今天。
我也太蠢了，没看出来什么特别的地方出来
额，就是页面导航前面的小图标而已
大餐、这绝对是大餐、不尝尝实在说不过去。
甜点而已~
这样挺好的，可惜我不太会。
这个不复杂，代码演示都有了~
呵呵，加上了！
呵呵，貌似你的独立页面跟我一样嘛~
人家这都是跟你学的，喜欢复制粘贴，所以才会一样。换成我会改动一个字变成不一样，哈哈。
哈哈，不一样好，那样才有特色~
谁让你是大众偶像呢。。。
我倒是更喜欢大众情人，哈哈
一直都想知道这个东东,谢谢啦！
哈哈，小玩意儿而已~
为什么不直接用在html的a标签里面，通过class来区分，然后照写那段CSS代码不行吗？
你说的这个也是可以的，不过IE6下除a标签外不支持hover属性的，稍稍有点瑕疵啦。