jquery简单的选项卡插件

引入jq和插件

<script src="../js/jquery-3.3.1.js"></script>
<script src="xxk.js"></script>

简单加css

<style>
			*{margin: 0;padding: 0;}
			.all span{
				display: inline-block;
				width: 60px;
				height: 30px;
				border: 1px solid #055846;
			}
			.all div{
				width: 180px;
				height: 150px;
				border: 1px solid #800080;
			}
		</style>

html结构

<div class="all">
			<span class="nav">链接1</span>
			<span class="nav">链接2</span>
			<span class="nav">链接3</span>
			<div class="box">内容1</div>
			<div class="box">内容2</div>
			<div class="box">内容3</div>
		</div>

初始化插件

<script>
			$(function(){
				$(".all").change1();
			})
		</script>

插件内容

(function($){
$.fn.change1=function(){
	var nav = $(this).children(".nav");
	var box = $(this).children(".box");
	box.css("display","none");
	nav.css("textAlign","center");
	$(".all .box:first").css("display","block");
	$(".all .nav:first").css({
		color:"#f00",
		backgroundColor:"#800080"
	})
	nav.click(function(){
		var fu=$(this).parent();
		var num = fu.children(".nav").index($(this));
		$(this).siblings(".nav").css({
			color:"#000",
			backgroundColor:"#fff"
		})
		$(this).css({
			color:"#f00",
			backgroundColor:"#800080"
		})
		$(this).siblings(".box").hide();
		var str = `.box:eq(${num})`;
		fu.find(str).show();
	})
}
	return this;
}(jQuery))