引入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))