js自定义插件-选项卡

最新推荐文章于 2023-02-22 11:34:12 发布

原创最新推荐文章于 2023-02-22 11:34:12 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery插件 #javascript #插件

javascript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个简单的jQuery插件，用于实现选项卡效果。通过鼠标悬停事件切换选项卡内容，并展示了完整的HTML结构及样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

该功能比较简单，巩固一下jquery插件写法，注意引入的jquery.js 、自定义插件路径代码如下：

页面：

<!doctype html>
<html>
    <head>
	  <meta charset='utf-8'/>
	  <style type="text/css">
		*{margin:0;padding:0;border:0;}
	    .banner{width:600px;height:144px;margin:70px 150px;display:inline-block;}
		.banner .b_nav li{list-style:none;height:40px;width:199px;line-height:40px;text-align:center;float:left;background:#ccc;margin:0 1px 2px 0;border-radius:10px;box-shadow:3px 3px 8px #188eee;}
		.banner .b_nav .navsel{color:#fff;background:#188eee;}
		.banner .b_content{width:600px;height:200px;border:1px solid red;}
		.banner .b_content a{
		  display:none;width:600px;height:200px;
		}
		.banner .b_content .first{
			  background-color: #0ae;
			  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
			  background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
			  background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
			  background-image: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
			  background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
			  background-image: linear-gradient(rgba(255, 255, 255, .2) 20%, transparent 50%, transparent);
			  box-shadow: 1px 1px 20px green;
			  background-size: 117px 36px;
		}
		.banner .b_content .second{
			  background-color: #159;
			  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
			  background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
			  background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
			  background-image: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
			  background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
			  background-image: linear-gradient(rgba(255, 255, 255, .2) 20%, transparent 50%, transparent);
			  box-shadow: 1px 1px 20px green;
			  background-size: 117px 36px;
		}
		.banner .b_content .thrid{
			  background-color: green;
			  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
			  background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
			  background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
			  background-image: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
			  background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
			  background-image: linear-gradient(rgba(255, 255, 255, .2) 20%, transparent 50%, transparent);
			  box-shadow: 1px 1px 20px green;
			  background-size: 117px 36px;
		}
		.banner .b_content .consel{display:block;}
	  </style>
	  
	</head>
	<body>
	  <div class="banner">
		<ul class="b_nav">
		   <li class="tiggerClass navsel">选项1</li>
		   <li class="tiggerClass">选项2</li>
		   <li class="tiggerClass">选项3</li>
		</ul>
		<div class="b_content">
			<a class="linkClass first consel" href="javascript:void(0);"></a>
			<a class="linkClass second"  href="javascript:void(0);"></a>
			<a class="linkClass thrid" href="javascript:void(0);"></a>
		</div>
	  </div>
	  
	  <div class="banner">
		<ul class="b_nav">
		   <li class="tiggerClass navsel">选项1</li>
		   <li class="tiggerClass">选项2</li>
		   <li class="tiggerClass">选项3</li>
		</ul>
		<div class="b_content">
			<a class="linkClass first consel" href="javascript:void(0);"></a>
			<a class="linkClass second"  href="javascript:void(0);"></a>
			<a class="linkClass thrid" href="javascript:void(0);"></a>
		</div>
	  </div>
	  
	  <div class="banner">
		<ul class="b_nav">
		   <li class="tiggerClass navsel">选项1</li>
		   <li class="tiggerClass">选项2</li>
		   <li class="tiggerClass">选项3</li>
		</ul>
		<div class="b_content">
			<a class="linkClass first consel" href="javascript:void(0);"></a>
			<a class="linkClass second"  href="javascript:void(0);"></a>
			<a class="linkClass thrid" href="javascript:void(0);"></a>
		</div>
	  </div>
	  
	</body>
	
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="option_select.js"></script>
	<script type="text/javascript">
		$(function(){
			$('div.banner').optionChange({
				event:'mouseover',
				triggerSelectCss:'navsel',
				linkSelectCss:'consel'
			});
		});
	</script>
</html>

自定义插件：

该插件遵循固定模板：

如

;(function($){
/**入口函数**/
$.fn.optionChange = function(opts){

};
/**插件内部逻辑函数**/
$.fn.optionChange.methods = {

};
/**默认参数块**/
$.fn.optionChange.defaults = {

};
/**属性参数**/
$.fn.optionChange.parseOptions = function(target){

};
})(jQuery);

;(function($){
	/**入口函数**/
	$.fn.optionChange = function(opts){
		this.each(function(){
			opts.currObj = $(this);
			opts = $.extend({},$.fn.optionChange.defaults,opts,$.fn.optionChange.parseOptions);
			var tobjlen =  opts.currObj.find('.'+opts.triggerObjClass).length;
			var lobjlen =  opts.currObj.find('.'+opts.linkObjClass).length;
			if(tobjlen && lobjlen && tobjlen === lobjlen){
				$.fn.optionChange.methods.init(opts);
			}
		});
	};
	/**插件内部逻辑函数**/
	$.fn.optionChange.methods = {
		init:function(opts){
			var event = opts.event;
			var triggerObjClass = opts.triggerObjClass;
			var linkObjClass = opts.linkObjClass;
			var currObj = opts.currObj;
			var linkSelectFn = opts.linkSelectFn;
			currObj.find('.'+triggerObjClass).on(event,function(){
				$this = $(this);
				$this.addClass(opts.triggerSelectCss).siblings().removeClass(opts.triggerSelectCss);
				var _linkObj = currObj.find('.'+opts.linkObjClass).eq($this.index());
				_linkObj.addClass(opts.linkSelectCss).siblings().removeClass(opts.linkSelectCss);
			});
		}
	};
	/**默认参数块**/
	$.fn.optionChange.defaults = {
		event:'',
		triggerObjClass:'tiggerClass',
		triggerSelectCss:'',
		linkObjClass:'linkClass',
		linkSelectCss:'',
		currObj:{}
	};
	/**属性参数 该功能用不到属性参数 故返回空对象**/
	$.fn.optionChange.parseOptions = function(target){
		return {};
	};
})(jQuery);

若需要了解属性参数什么含义请阅读： http://blog.youkuaiyun.com/pleasurehappy/article/details/46399855