JQuery+CSS实现wordpress分类前面不同的图标

实现wordpress分类前面不同的图标是通过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代码

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

Jqyery代码中的ul.navi li a 要跟div中对应;为了区分分类名字与title,我特地将分类名字后面加1区分,我们要的title里面的,然后通过CSS针对性的定义的。
  大家看到这里用中文是不是感觉有点奇怪,一般用到中文的好像只是在字体中,比如:微软雅黑,宋体,其实其他地方也是可以使用中文定义的。
  title里面是什么,上面的css中就对应什么,我想大家这么聪明,应该很快就能明白我说的。
[anyad]
演示地址:
[url]http://www.weisay.com/blog/codes/11/index.html[/url]
原文地址:http://www.weisay.com/blog/jquery-css-different-nav-icons.html

人吐槽 人点赞

猜你喜欢

发表评论

用户名: 密码:
验证码: 匿名发表

你可以使用这些语言

查看评论:JQuery+CSS实现wordpress分类前面不同的图标