jqery实现手写选项卡

实现目标

单击不同选项，出现不同内容

html架构：

css也写好了；

类panel设置为隐藏
类active设置为显示
注意css里面只是类名和颜色等样式，显示和隐藏的效果是靠jq的
我们需要用jQ代码实现，鼠标单击操作后，改变该元素的类，从而改变其样式让目标部分隐藏或显示
ps：所以，操作并不神秘，css的类样式都写好了，只需要用jqery实现改变目标元素类

第一步

加载jq

<script src=".../jquer.js"></script>

</script>

第二步

编写脚本

用注释理清思路

<script src=".../jquer.js"></script>
$(function() {
	$('.tab-panels .tabs li').on('click', function() {
	//找到需要显示的面板
	//隐藏现在的面板
	//展示新的面板
	
	});
})
</script>

回调地狱

开发者称一个回调里面包含多个回调为回调地狱
难点是定位执行到哪一步了，this会跟随执行变化而变化

实现的最终效果很简单，但也需要一步一步的逻辑，比如先隐藏面板为它加上相应类，再显示面板不能忘掉去掉相应的类
所以会有重重回调和方法

别想一遍就能看懂

避免回调地狱

给函数起名字，减少回调层级
也是一种变量赋值使代码更清晰的意思

再给选择器变量赋值，减少遍历dom的次数
引用的变量需要在前面加$以区分普通变量，如$panel