标签切换js

最近在做页面的时候。经常碰到切换标签的地方。几乎每次设置都挺费劲的。今天写了个插件。以备用。

1，脚本

(function ($) {
    $.fn.changetab = function (options) {
        options = $.extend({
            setcss: "hover",
            divid: "tagContent",
            switchmode: "click"

        }, options);
        var obj = $(this);
        var clickindex = 0;
        $("li:first", obj).addClass(options.setcss).siblings().removeClass(options.setcss);
        $("#" + options.divid + ">div:first").show().siblings().hide();
        $("li", obj).bind(options.switchmode, function () {
            clickindex = $("li", obj).index($(this));
            $(this).addClass(options.setcss).siblings().removeClass(options.setcss);
            $("#" + options.divid + ">div").each(function () {
                var indextemp = $("#" + options.divid + ">div").index($(this));
                if (indextemp == clickindex) {
                    $(this).show().siblings().hide();
                }
            })
        })

        return $(this);
    },
            $.fn.color = function (value) {
                return this.css("color", value);
            }
})(jQuery);

2.参数说明

setcss: 为选中时需要设置的样式。switchmode: 设置事件名。如click事件。divid: 为包含内容的div的id。

3，调用
    <script type="text/javascript">
       
        $(function () {
            $("#tags").changetab({ setcss: "selectTag2", switchmode: "click", divid: "tagContent" });
        })

    </script>

4，页面设置

<ul class="middle" id="tags">
           <li><a href="javascript:void(0)">河南</a></li>
           <li><a  href="javascript:void(0)">云南</a></li>
           <li><a  href="javascript:void(0)">福建</a></li>
           <li><a  href="javascript:void(0)">广西</a></li>
           <li><a  href="javascript:void(0)">东北</a></li>
           <li><a  href="javascript:void(0)">川西北</a></li>
           <li><a href="javascript:void(0)">华东</a></li>
           <li><a  href="javascript:void(0)" class="last">其他</a></li>
         </ul>
<div class="con" id="tagContent">
          <div class="tagContent selectTag">
            湖南
          </div>
          <div class="tagContent">
          云南
          </div>
          <div class="tagContent">
          福建
          </div>
          <div class="tagContent">
          广西
          </div>
          <div class="tagContent">
          东北
          </div>
          <div class="tagContent">
          川西北
          </div>
          <div class="tagContent">
          华东
          </div>
          <div class="tagContent">
          其他
          </div>
        </div>