From 42b311e1f6100bdbc4c96438f71734569917f398 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=91=A8=E5=8E=9A=E8=BE=B0?= <zha_cai@qq.com>
Date: Wed, 13 Dec 2023 21:00:35 +0800
Subject: [PATCH] twenty-fourth

---
 ...\233\276  Tab \345\210\207\346\215\242.md" | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 "53 \345\221\250\345\216\232\350\276\260/2023-12-13 \347\254\254\344\272\214\345\215\201\345\233\233\346\254\241\344\275\234\344\270\232 \350\275\256\346\222\255\345\233\276  Tab \345\210\207\346\215\242.md"

diff --git "a/53 \345\221\250\345\216\232\350\276\260/2023-12-13 \347\254\254\344\272\214\345\215\201\345\233\233\346\254\241\344\275\234\344\270\232 \350\275\256\346\222\255\345\233\276  Tab \345\210\207\346\215\242.md" "b/53 \345\221\250\345\216\232\350\276\260/2023-12-13 \347\254\254\344\272\214\345\215\201\345\233\233\346\254\241\344\275\234\344\270\232 \350\275\256\346\222\255\345\233\276  Tab \345\210\207\346\215\242.md"
new file mode 100644
index 0000000..bc4f6b3
--- /dev/null
+++ "b/53 \345\221\250\345\216\232\350\276\260/2023-12-13 \347\254\254\344\272\214\345\215\201\345\233\233\346\254\241\344\275\234\344\270\232 \350\275\256\346\222\255\345\233\276  Tab \345\210\207\346\215\242.md"	
@@ -0,0 +1,66 @@
+# 2023-12-13 第二十四次作业 轮播图  Tab 切换
+
+## 轮播图
+
+```js
+// 获取所有slider指示器的ul元素
+let ul = $('.slider-indicator');
+// 获取slider包装器内的所有img元素
+let img = $('.slider-wrapper img');
+
+// 当鼠标进入slider指示器的li元素时，给当前li元素添加'active'类，并移除其他li元素的'active'类
+// 同时，将slider包装器内的img元素的src属性设置为sliderData中当前li元素的url，alt属性设置为当前li元素的title
+ul.on('mouseenter', 'li', function () {
+    $(this).addClass('active').siblings().removeClass('active');
+    img.attr({'src': sliderData[$(this).index()].url, alt: sliderData[$(this).index()].title});
+})
+
+// 当点击prev按钮时，获取当前active li元素的索引
+// 如果索引为0，将index设置为sliderData长度减1，否则将index减1
+// 给当前索引的li元素添加'active'类，并移除其他li元素的'active'类
+// 将slider包装器内的img元素的src属性设置为对应索引位置的url，alt属性设置为对应索引位置的title
+$('.prev').on('click', function () {
+    let index = ul.children('.active').index();
+    if (index === 0) {
+        index = sliderData.length - 1;
+    } else {
+        index--;
+    }
+    ul.children().eq(index).addClass('active').siblings().removeClass('active');
+    img.attr({'src': sliderData[index].url, alt: sliderData[index].title});
+})
+
+// 当点击next按钮时，获取当前active li元素的索引
+// 如果索引等于sliderData长度减1，将index设置为0，否则将index加1
+// 给当前索引的li元素添加'active'类，并移除其他li元素的'active'类
+// 将slider包装器内的img元素的src属性设置为对应索引位置的url，alt属性设置为对应索引位置的title
+$('.next').on('click', function () {
+    let index = ul.children('.active').index();
+    if (index === sliderData.length - 1) {
+        index = 0;
+    } else {
+        index++;
+    }
+    ul.children().eq(index).addClass('active').siblings().removeClass('active');
+    img.attr({'src': sliderData[index].url, alt: sliderData[index].title});
+})
+
+// 每3000毫秒（即3秒）执行一次函数，触发点击next按钮事件
+setInterval(function () {
+    $('.next').click();
+}, 3000)
+```
+
+## Tab 切换
+
+```js
+    let $ul = $('ul li a');  // 选择所有的ul元素下的li元素下的a元素，并缓存到变量$ul中
+    let $tab = $('.tab-content');  // 选择所有的元素具有class为tab-content的，并缓存到变量$tab中
+    $ul.on('mouseenter', function () {  // 当$ul中的元素鼠标进入时执行以下函数
+        $ul.removeClass('active');  // 从$ul中所有元素移除class为active
+        $(this).addClass('active').siblings().removeClass('active');  // 将this元素添加class为active
+        $tab.children().eq($ul.index(this))  // 选择$tab中的子元素，索引为$ul中当前this元素的索引
+            .addClass('active')  // 对上述选中的元素添加class为active
+            .siblings().removeClass('active');  // 移除上述选中元素的兄弟元素的class为active
+    })
+```
\ No newline at end of file
-- 
Gitee