用Jquery 仿VS 样式的 导航栏插件

在开发B/S 项目过程中，根据主界面设计要求，需要做一个类似VS 左边工具栏样式的菜单导航栏，在网上搜索无果后，于是决定自已做一个。

由于前台用JQuery开发， 想到网上很多人用JQuery做插件，开发起来很方便。于是呼，我也照猫画虎地瞎做一个，限本人文采水平一般，只能贴代码共享。

效果图：

代码：

      /*
 * toolsTags 0.1
 * Copyright (c) 2014 www.xacf.com YeHui  叶辉
 * Date: 2014-8-4
 * JQuery 插件 支持JQuery 1.3.2 和1.10.2
 * 仿VS 左侧工具导航栏样式的菜单工具栏插件。
 */
            var toolsTag = {
             toolsTags: [
                 { title: "导航1", cative: 1 },
                 { title: "导航2", cative: 0 },
                 { title: "导航3", cative: 0 }
             ]
         };
         (function ($) {
             var ver = $.fn.jquery;
             $.fn.toolsTags = function (options) {
                 var defaults = {
                     data: toolsTag
                 }, options = $.extend(defaults, options),
                   tags = [],
                   contents = [],
                   tagName = "#tag",
                   contentName = "#toolsContent",
                   activeToolsIndex = 0;

                 var uld = $('<ul />', {
                     id: "toolsTags"
                 }).appendTo("#tools_layout").addClass("t_toolsTags");
                 if (ver === "1.3.2")
                     uld.attr("id", "toolsTags");

                 if (options.data.toolsTags && $.isArray(options.data.toolsTags)) {
                     $.each(options.data.toolsTags, function (i, val) {
                         var lid = $('<li />', {
                             id: "tag" + i,
                             html: val.title,
                             tabIndex: i
                         }).appendTo("#toolsTags");

                         var divD = $('<div />', {
                             id: "toolsContent" + i
                         }).appendTo("#tools_layout").addClass("t_toolsContent");

                         tags.push(tagName + i);
                         contents.push(contentName + i);

                         if (ver === "1.3.2") {
                             lid.attr("id", "tag" + i).html(val.title);
                             lid.attr("tabIndex", i);
                             divD.attr("id", "toolsContent" + i);
                         }

                         if (val.cative === 1) {
                             $("#tag" + i).addClass("i_active");
                             $("#toolsContent" + i).addClass("t_contentActive");
                         }
                     });
                 };
                 $.each(tags, function (i, val) {

                     $(val).click(function (e) {
                         tags_SetActive();
                         var index = e.target.tabIndex;

                         $(tags[index]).addClass("i_active");
                         $(contents[index]).addClass("t_contentActive");
                         activeToolsIndex = index;
                     });

                     $(val).mouseover(function (e) {
                         $.each(tags, function (i, val) {
                             $(tags[i]).removeClass("i_active");
                         });
                         var index = e.target.tabIndex;
                         $(tags[index]).addClass("i_active");
                     });
                     $(val).mouseout(function (e) {
                         $.each(tags, function (i, val) {
                             $(tags[i]).removeClass("i_active");
                         });
                         $(tags[activeToolsIndex]).addClass("i_active");
                     });
                 });

                 function tags_SetActive() {
                     $.each(tags, function (i, val) {
                         $(tags[i]).removeClass("i_active");
                     });
                     $.each(contents, function (i, val) {
                         $(contents[i]).removeClass("t_contentActive");
                     });
                 }
             };
         })(jQuery);

HTML

  <div id="tools_layout">
        </div>

        <script type="text/javascript">

            $().toolsTags();
            $("#toolsContent1").html("导航栏二中的菜单项");
        </script>

CSS 样式表

   html, body, div, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, caption, th, td, img, form, fieldset, legend, input, label, button, textarea {
            margin: 0;
            padding: 0;
        }

        html, body {
            font-family: Arial,SimSun;
            font-size: 14px;
            font: normal 12px/14px SimSun,arial;
        }

        ul {
            list-style: none;
        }

        #tools_layout {
            width: 260px;
            margin: 0 auto;
        }

        .t_toolsTags {
            position: absolute;
            left: 0;
            z-index: 9;
            border-right: 2px solid #3BB1A3;
            background-color: #3BB1A9;
            width: 25px;
            height: 100%;
        }

            .t_toolsTags li {
                width: 100%;
                _min-height: 100px;
                height: auto;
                padding-top: 10px;
                padding-bottom: 10px;
                line-height: 120%;
                text-align: center;
                cursor: pointer;
                margin-bottom: 2px;
                font-family: SimSun;
                font-size: 14px;
            }

                .t_toolsTags li,
                .t_toolsTags li.i_active {
                    margin-left: 0px;
                    padding-left: 2px;
                }

            .t_toolsTags li {
                background-color: #218175;
            }

                .t_toolsTags li.i_active {
                    background-color: #dcf8fa;
                }

        .t_toolsContent {
            left: 0;
            margin-left: 27px;
            height: 100%;
            border-right: 2px solid #00ff21;
            width: 180px;
            background-color: #dcf8fa;
            position: absolute;
            display: none;
            padding-left: 5px;
        }

        .t_contentActive {
            display: block;
        }

        .hrtest {
            height: 5px;
            width: 100%;
            border-top: 1px solid red;
            border-left: none;
            border-right: none;
            border-bottom: none;
        }