正在载入...

实现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中就对应什么,我想大家这么聪明,应该很快就能明白我说的。

演示地址:
http://www.weisay.com/blog/codes/11/index.html
原文地址:http://www.weisay.com/blog/jquery-css-different-nav-icons.html

本文链接:

关键词:css, jQuery, WordPress, 代码,

(全文完        )

Comments

哈哈,沙发有木有?!!!抢沙发快速评论

你需要 登录 才可以回复.