常用的jquery选项卡插件

2015-6-1更新：

//选项卡插件
;(function($){
    $.fn.extend({
        tabs: function(options){
            options = $.extend({
                tabMenu: ".tab-menu",
                tabCont: ".tab-cont",
                event: "click",
                classname: "selected"
            }, options);
            var self = $(this),
                menus = self.find(options.tabMenu).children(),
                conts = self.find(options.tabCont).children();
            menus.first().addClass(options.classname);
            conts.hide().first().show();
            menus.on(options.event, function(){
                var index = $(this).index();
                $(this).addClass(options.classname).siblings().removeClass(options.classname);
                conts.eq(index).show().siblings().hide();
            });
        }
    });
})(jQuery);

 

 

 

项目中经常用到选项卡，还是保存到博客里面吧，用的时候直接复制就好，省得每次都写。。

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>选项卡插件</title>
	<style>
	body,ul,li {margin:0; padding:0;}
	ul {list-style:none;width:600px;border:1px solid #ddd; margin:0 auto;font-size:14px;}
	.hd {background:#eee;height:40px;margin-top:100px;box-shadow:1px 0 10px #eee;}
	.hd li {float:left;width:120px;text-align:center;height:40px;line-height:40px;border-right:1px solid #e0e0e0;cursor:pointer;}
	.hd li.cur {background:#333;color:#fff;}
	.bd {border-top:none;border-radius:0 0 4px 4px;box-shadow:1px 1px 15px #eee;}
	.bd li {height:200px;display:none;padding:10px;}
	</style>
</head>
<body>

<ul class="hd">
    <li>菜单一</li>
    <li>菜单二</li>
    <li>菜单三</li>
</ul>

<ul class="bd">
    <li>内容一</li>
    <li>内容二</li>
    <li>内容三</li>
</ul>

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
;(function($){
	$.extend({
		Tab: function(menu, cont, event){
			var menu = $(menu).children();
			var cont = $(cont).children();
			menu.first().addClass("cur");
			cont.hide().first().show();
			menu.on(event, function(){
				var index = menu.index(this);
				$(this).addClass("cur").siblings().removeClass("cur");
				cont.eq(index).show().siblings().hide();
			});
		}
	});
})(jQuery);
</script>

<script>
$(function(){
	$.Tab(".hd", ".bd", "click");
});
</script>

</body>
</html>

　　

 

左右滑动的选项卡，抽空整理成插件：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery滑动选项卡</title>
	<style>
	body,ul,li {margin:0;padding:0;}
	ul {list-style-type:none;}
	a {text-decoration:none;color:#333;}
	.box {width:500px;margin:20px auto;border:1px solid #ddd;font-size:14px;}
	.hd-mod {height:40px;position:relative;background-color:#eee;}
	.hd-mod ul {height:100%;}
	.hd-mod li {width:130px;height:40px;float:left;}
	.hd-mod a {height:100%;position:relative;z-index:1;display:block;line-height:40px;text-align:center;}
	.cover {width:130px;height:40px;position:absolute;top:0;left:0;background-color:#3cf;}
	.bd-mod {width:500px;overflow:hidden;}
	.bd {width:1500px;position:relative;top:0;left:0;}
	.list {width:500px;min-height:200px;float:left;}
	</style>
</head>
<body>

<div class="box">
	<div class="hd-mod">
		<ul id="hd" class="hd">
			<li><a href="#">菜单一</a></li>
			<li><a href="#">菜单二</a></li>
			<li style="float:right;"><a href="#">菜单三</a></li>
		</ul>
		<div class="cover"></div>
	</div>
	<div class="bd-mod">
		<div id="bd" class="bd">
			<div class="list">内容1</div>
			<div class="list">内容2</div>
			<div class="list">内容3</div>
		</div>
	</div>
</div>


<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function() {
	var cover = $(".cover");
	var menu = $("#hd li");
	var cont = $("#bd");
	menu.click(function() {
		var self = $(this);
		var i = menu.index(this);
		cover.animate({"left": self.position().left}, "fast");
		cont.animate({"left": -i*500}, "fast");
	});
})
</script>
</body>
</html>

　　

 

 

 

posted @ 2013-12-07 22:53  赵小磊  阅读(236)  评论(0)    收藏  举报
回到头部