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