# 折叠手风琴
$(function() | |
{ | |
console.log($(".option")); | |
$(".option").click(function() | |
{ | |
$(this).siblings().removeClass("active"); | |
$(this).addClass("active"); | |
}) | |
// 方式二 | |
// $(".option").each((index, item) => { | |
// $(item).click(function() | |
// { | |
// $(this).siblings().removeClass("active"); | |
// $(this).addClass("active"); | |
// }) | |
// }) | |
// 当添加事件的时候，可以不用遍历选中的元素 | |
}) |
# 网页 PPT
// TODO: 请补充该函数，实现根据 activeIndex 切换页面的功能，并且在到达最后一页或第一页时给相应的按钮添加 disable 类 | |
// 添加样式的时候，得遍历选中的所有元素 | |
$("section").each((index, item) => { | |
$(item).css("display", index !== activeIndex ? 'none' : 'block'); | |
}) | |
//TODO: 修改页码 | |
$(".controls .page").text(`${activeIndex+1}/5`) | |
//TODO: 箭头指向 | |
if (activeIndex === 0) { | |
$(".btn.left").addClass("disable") | |
} | |
else if(activeIndex===sectionsCount-1){ | |
$(".btn.right").addClass("disable") | |
}else{ | |
$(".btn.left").removeClass("disable") | |
$(".btn.right").removeClass("disable") | |
} |
#
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>Document</title> | |
<script src="vue.min.js"></script> | |
<link rel="stylesheet" href="./css/style.css" /> | |
</head> | |
<body> | |
<div id="app"> | |
<div class="search-wrapper"> | |
<input type="text" v-model="search" placeholder="请搜索" /> | |
</div> | |
<div class="wrapper"> | |
<div class="card" v-for="post in filteredList"> | |
<a v-bind:href="post.link" target="_blank"> | |
<img v-bind:src="post.img" /> |
