当前位置: 首页 > 设计 > 正文
avatar

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

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

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

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

演示地址:
本文固定链接: http://www.weisay.com/blog/jquery-css-different-nav-icons.html | 威言威语

JQuery+CSS实现分类菜单前面不同的图标:目前有59 条评论

  1. avatar
    28楼
    有歌 Mozilla Firefox Windows

    我就悲剧了,因为我一点都不懂。现在想弄上去都不会。搞了半天也没得!有哪位可以教教?

    2012-07-22 13:32 [回复]
  2. avatar
    27楼
    王叨叨 Google Chrome Windows

    其实你用这种方法更省事a[title*=””],只是不兼容ie6而已,你这样写的话,执行效率有点低。

    2012-04-14 13:56 [回复]
    • avatar
      William Safari iPhone

      这效率确实低了点,IE6太悲剧了点

      2012-04-14 14:25 [回复]
      • 觉得没必要太考虑ie6,不要为了兼容而兼容,只要ie6不影响浏览就行了,不用做的浏览效果都一样。

        2012-04-14 14:27 [回复]
  3. avatar
    26楼
    软兔兔 Mozilla Firefox Windows

    weisaysimple 这个主题的改法一样??

    2011-11-08 15:18 [回复]
  4. avatar
    25楼
    思奇 Google Chrome Linux

    很实用,收藏一下~
    过段时间需要用到~

    2011-11-03 21:25 [回复]
  5. avatar
    24楼
    ishi90 Internet Explorer Windows

    对于刚刚开始的小白来说压力还是比较大 :cry: Html代码没有说怎么用 :?: 只有首页有图标其他没有麻烦指点下

    2011-10-14 23:31 [回复]
    • avatar
      William Safari iPhone

      你把jquery代码放到header.php里面,你现在可能放index.php里面了。

      2011-10-15 13:38 [回复]
      • avatar
        ishi90 Internet Explorer Windows

        :cool: 谢谢你的提示已经完美解决了是jquery代码放错地方了

        2011-10-15 21:36 [回复]
  6. avatar
    23楼
    anshao Opera Windows

    向博主学习!不知道博主提供的jQuery代码是否是写在主题的header.php文件中呢?还有提供的CSS代码是否是写在主题的style.css中呢?麻烦了!

    2011-10-13 00:59 [回复]
    • avatar
      William Safari Windows

      对于weisay heibai这个主题是这样就行了

      2011-10-13 16:22 [回复]
  7. avatar
    22楼
    losttear Opera Windows

    你好,请问一下,是将上面的jQuery代码放在主题的header.php中,CSS代码放在主题的style.css中就可以实现了吗?

    2011-10-12 23:27 [回复]
    • avatar
      William Safari Windows

      对于weisay heibai这个主题是这样就行了。

      2011-10-13 16:22 [回复]
  8. avatar
    21楼
    我爱pc Google Chrome Windows

    原来是这样的啊,学习了!

    2011-10-06 14:02 [回复]
  9. avatar
    20楼
    wmtimes Google Chrome Windows

    这用中文来写class我还真是头一次见啊。

    2011-09-28 22:01 [回复]
    • avatar
      William Google Chrome Windows

      :wink: 哈哈,看来我这个还是有启示意义的~

      2011-09-29 10:26 [回复]
  10. avatar
    19楼
    路人丙 Mozilla Firefox Windows

    我表示,完全看不懂,这些代码加在哪里,哪个什么什么库怎么加载。。。隔行如隔山啊,完全不懂。

    2011-09-27 17:58 [回复]
    • avatar
      William Safari iPhone

      Jquery库一般主题都有了,只要加上那段Jquery代码就行,css代码放到主题style.css里面。

      2011-09-28 07:22 [回复]
  11. avatar
    18楼
    徐发发 Google Chrome Windows

    :shock: 学习了,感谢!

    2011-09-18 19:48 [回复]
  12. avatar
    17楼
    xmwusx.cn Internet Explorer Windows

    这个技巧还不错~省的一个个设置class

    2011-09-17 15:12 [回复]
    • avatar
      William Internet Explorer Windows

      其实呢跟家class一样,只是调用的title里面的东西,调用class也是一样

      2011-09-17 19:07 [回复]
  13. avatar
    16楼
    大猪 世界之窗浏览器 Windows

    挺实用的小技巧

    2011-09-17 11:12 [回复]
  14. avatar
    15楼
    阿哲 Internet Explorer Windows

    哈哈,有Jquery还是用这个好。 :wink:

    2011-09-17 10:34 [回复]
    • avatar
      William Internet Explorer Windows

      必然的,可以最大化的利用Jquery

      2011-09-17 19:06 [回复]
  15. avatar
    14楼
    阿梁 Internet Explorer Windows

    教程能不能详细点吗,我是第一次接触wp,还是没看懂,谢谢!

    2011-09-16 09:52 [回复]
    • avatar
      William Internet Explorer Windows

      话说我还真不知道还要再怎么详细了~ :oops:

      2011-09-16 21:03 [回复]
  16. avatar
    13楼
    魏星博客 Google Chrome Windows

    第一次看到css中竟然可以使用中文,长见识了!

    2011-09-16 09:05 [回复]
    • avatar
      William Internet Explorer Windows

      哈哈,可以使用中文字体的。 :roll:

      2011-09-16 21:02 [回复]
  17. avatar
    12楼
    益酷网 Internet Explorer Windows

    学习一下!这样看起来更美观了!

    2011-09-15 21:23 [回复]
    • avatar
      William Internet Explorer Windows

      稍稍个性了一点,不那么单调了

      2011-09-15 22:36 [回复]
  18. avatar
    11楼
    尘色记忆 Internet Explorer Windows

    又来学习了 呵呵 ~!

    2011-09-15 20:48 [回复]
  19. avatar
    10楼
    林肆 Internet Explorer Windows

    这个皮肤我真是很喜欢啊,设计的太好了。

    2011-09-15 16:31 [回复]
    • avatar
      William Internet Explorer Windows

      那就赶紧换成WP,哈哈

      2011-09-15 22:36 [回复]
      • avatar
        林肆 Google Chrome Windows

        这个诱惑太大了,我还要考虑精力问题。

        2011-09-16 08:16 [回复]
        • avatar
          William Internet Explorer Windows

          其实吧,博客只是平台,重要的还是文字,界面也是为内容服务的。

          2011-09-16 21:00 [回复]
  20. avatar
    9楼
    Mr.zhao Maxthon Windows

    那个JQ代码要放在哪啊,我是小白,求指导!

    2011-09-15 14:46 [回复]
    • avatar
      William Internet Explorer Windows

      放header上面,你可以查看我的演示地址里面的源文件就应该能明白了。

      2011-09-15 22:35 [回复]
      • avatar
        Mr.zhao Maxthon Windows

        恩,已经折腾出来了,谢谢威哥

        2011-09-15 22:36 [回复]
        • avatar
          William Internet Explorer Windows

          哈哈,自己整整下次折腾起来就快了 :lol:

          2011-09-15 22:40 [回复]
  21. avatar
    8楼
    锐品创意 Internet Explorer Windows

    过来支持一下·a wei

    2011-09-15 09:38 [回复]
  22. avatar
    7楼
    三人帮 Google Chrome Windows

    我看到了 历史上的今天 这个,貌似在别的站没看到过

    2011-09-15 00:02 [回复]
    • avatar
      William Internet Explorer Windows

      这是一个插件,就叫:历史上的今天。

      2011-09-15 22:38 [回复]
  23. avatar
    6楼
    Always.Life Mozilla Firefox Windows

    我也太蠢了,没看出来什么特别的地方出来

    2011-09-14 23:49 [回复]
    • avatar
      William Internet Explorer Windows

      额,就是页面导航前面的小图标而已 :oops:

      2011-09-15 22:39 [回复]
  24. avatar
    5楼
    qiuyili Google Chrome Windows

    大餐、这绝对是大餐、不尝尝实在说不过去。 :cry:

    2011-09-14 15:49 [回复]
  25. avatar
    4楼
    阿修罗 Internet Explorer Windows

    这样挺好的,可惜我不太会。

    2011-09-14 14:22 [回复]
    • avatar
      William Internet Explorer Windows

      这个不复杂,代码演示都有了~

      2011-09-14 21:13 [回复]
  26. avatar
    地板
    水缘泡泡 Mozilla Firefox Windows

    呵呵,加上了!

    2011-09-14 13:18 [回复]
    • avatar
      William Internet Explorer Windows

      呵呵,貌似你的独立页面跟我一样嘛~ :lol:

      2011-09-14 21:13 [回复]
      • avatar
        qiuyili Internet Explorer Windows

        人家这都是跟你学的,喜欢复制粘贴,所以才会一样。换成我会改动一个字变成不一样,哈哈。

        2011-09-14 21:20 [回复]
        • avatar
          William Internet Explorer Windows

          哈哈,不一样好,那样才有特色~

          2011-09-14 21:25 [回复]
      • avatar
        Lvtu Google Chrome Windows

        谁让你是大众偶像呢。。。 :lol: :lol:

        2011-09-15 16:27 [回复]
        • avatar
          William Internet Explorer Windows

          我倒是更喜欢大众情人,哈哈

          2011-09-15 23:20 [回复]
  27. avatar
    板凳
    Lvtu Google Chrome Windows

    一直都想知道这个东东,谢谢啦!

    2011-09-14 09:13 [回复]
    • avatar
      William Internet Explorer Windows

      哈哈,小玩意儿而已~

      2011-09-14 21:12 [回复]
  28. avatar
    沙发
    独自流浪 Google Chrome Windows

    为什么不直接用在html的a标签里面,通过class来区分,然后照写那段CSS代码不行吗?

    2011-09-14 01:11 [回复]
    • avatar
      William Internet Explorer Windows

      你说的这个也是可以的,不过IE6下除a标签外不支持hover属性的,稍稍有点瑕疵啦。

      2011-09-14 21:11 [回复]

发表评论

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter