一选项卡
1 先给需要的所有的按钮添加一个事件
2 获取当前按钮的 index, 使用 var idx = $(this).index();
3 给当前的按钮添加一个 class 类, 而其余的兄弟节点去除 class 类 $(this).addClass('active').siblings().removeClass('active');
4 把与 index 对应的 p 显示出来 $('#p2>p').eq(idx).show().siblings().hide();
二简易日历
1 先给需要的所有的按钮添加一个事件 $('#table>ul>li').mouseenter
2 获取当前按钮的 index, 使用 var idx = $(this).index();
3 给当前的点击的添加 CSS, 使背景颜色为蓝色, 其他的把 css 设置成白色 $(this).css(backgroundColor,blue).siblings().css(backgroundColor,white);`
4 把之前用字符串连接的部分放到 html() 方法中
$('#p1').html('<h2>'+(idx+1)+'月 </h2><p>'+oText[idx] +'</p>');
三全选全不选反选
1 给不同的按钮添加事件 $('button').eq(0).click, 使用 eq() 方法和下标来实现
2 使用 prop() 方法来设置布尔值的属性
3 对于全选 $('#check1 input').prop('checked',true);
全不选 $('#check1 input').prop('checked',false);
4 对于反选, 其中有一个: checked
四轮播
1 其中不用设置一个很长的 ul, 而是把所有的图片都固定到一个位置, 最开始只有第一张是 block, 其余的都是 none, 然后使用 jq 让其淡入淡出
2 给右箭头添加点击事件, 使用一个变量 count 来记录点击的次数, 当 count 的值等于图片个数, 即 li 的 length 时, 让 count=0; 让每一个对应 count 的 li 淡入出来, 其余的淡出
3 对于左箭头, 需要判断的是当 count=-1 的时候, 让 count 变为里 li.length-1;
来源: https://www.2cto.com/kf/201803/732301.html