怎样在博客园中添加自己的导航栏
Posted zhangfengxian
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎样在博客园中添加自己的导航栏相关的知识,希望对你有一定的参考价值。
原本想在博客园中添加自己的导航栏,摸索一番后才发现,博客园没有提供添加自己导航栏的功能。要是能自己写js来添加应该也是可以的,于是申请了js权限,申请了好多次都不通过,~~o(>_<)o ~~,今天终于审核通过了,自己尝试来添加导航。
准备导航栏js
我自己写了一个简单的jquery插件来添加或者移除导航,好,不多说了,贴出代码:
(function(jQuery) { var arr = [], slice = arr.slice; var methods = { init: function() { }, addNav: function(index, name, url) { var $nav = $(this), $items = $nav.children(), $item = $(‘<li><a class="menu" href="‘ + url + ‘">‘ + name + ‘</a></li>‘); if (index < $items.length) { $items.eq(index).before($item); } else { $nav.append($item); } return this; }, removeNav: function(index) { var $nav = $(this); $nav.children(‘:eq(‘ + index + ‘)‘).remove(); return this; } }; $.fn.cnblogsNav = function(method) { if (methods[method]) { return methods[method].apply(this, slice.call(arguments, 1)); } else if (typeof method === ‘object‘ || !method) { return methods.init.apply(this, arguments); } else { $.error( ‘Method ‘ + method + ‘ does not exist on jQuery.cnblogsNav‘ ); } }; })(jQuery);
楼楼已经将该插件的代码上传到博客园了,有需要的同学可以直接引用:
<script src="//blog-static.cnblogs.com/files/zhangfengxian/cnblogs-nav.js"></script>
添加移除导航
添加移除导航的代码比较简单,如下:
<script> $(function() { var $navList = $(‘#navList‘); $navList.cnblogsNav(‘addNav‘, 4, ‘读书书单‘, ‘//www.cnblogs.com/zhangfengxian/p/my-book-list.html‘); $navList.cnblogsNav(‘addNav‘, 4, ‘我的AI之路‘, ‘//www.cnblogs.com/zhangfengxian/p/my-ai-trip.html‘); $navList.cnblogsNav(‘removeNav‘, 2); }); </script>
addNav方法有三个参数:
- index:添加的导航的索引,从0开始
- name:导航的名称
- url:导航的url
removeNav只有一个参数index:删除的导航的索引,从0开始。
怎么样?很简单是吧,赶快在你的博客上用起来吧。
以上是关于怎样在博客园中添加自己的导航栏的主要内容,如果未能解决你的问题,请参考以下文章