jquery tab切换标签切换插件——jQuery.fn.tabSwitch

最新推荐文章于 2024-07-26 03:35:47 发布

欧德曼

最新推荐文章于 2024-07-26 03:35:47 发布

阅读量5.6k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/A__java___A/article/details/8306563

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jquery标签切换插件

JS方法

jQuery.fn.tabSwitch = function(params) {
    var p = params || {
        tab: "cartTab li",
        tabClass: "current",
        tabFrame: "tabs_content"
    };
    var _btnTab = $("#" + p.tab);
    var tabClass = p.tabClass;

    var _tabFrame = $("." + p.tabFrame);
    var intervalID;
    var curLi;

    _btnTab.mouseenter(function(){
        curLi=$(this);
        intervalID=setInterval(onMouseOver,150);//鼠标移入的时候有一定的延时才会切换到所在项，防止用户不经意的操作
    }).mouseleave(function(){
        clearInterval(intervalID);
    });

    function onMouseOver(){
        _tabFrame.hide();
        _tabFrame.eq(_btnTab.index(curLi)).show();

        _btnTab.removeClass(tabClass);
        curLi.addClass(tabClass);
    }
};

调用方式

$("#redemptionPromotionList").tabSwitch({
      tab: "cartTab li",
      tabClass: "current",
      tabFrame: "tabs_content"
});

HTML代码

<div id="redemptionPromotionList">
	<div>
	    <ul id="cartTab">
		<li>我是标签1</li>
		<li>我是标签2</li>
		<li>我是标签3</li>
	    </ul>
	</div>

	<div>
		<div class="tabs_content" style="display: none;">
			我是内容1
		</div>
		<div class="tabs_content" style="display:none">
			我是内容2
		</div>
		<div class="tabs_content" style="display: none;">
			我是内容3
		</div>
	</div>
</div>