博客列表 >选项卡案例

选项卡案例

皮皮志
皮皮志原创
2022年11月11日 15:56:00572浏览
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. body{
  10. font: 14px Helvetica Neue,Helvetica,PingFang SC,\5FAE\8F6F\96C5\9ED1,Tahoma,Arial,sans-serif;
  11. }
  12. /* 隐藏 */
  13. .hidden {
  14. display: none;
  15. }
  16. /* 显示 */
  17. .active {
  18. display: block;
  19. }
  20. .type > *.active,
  21. .content > *.active {
  22. background-color: lightgreen;
  23. }
  24. a img{
  25. width: 224px;
  26. height: 128px;
  27. border-radius: 6px 6px 0px 0px;
  28. transition: all 0.2s;
  29. }
  30. li{
  31. list-style: none;
  32. }
  33. a{
  34. text-decoration: none;
  35. }
  36. .content .active{
  37. display: grid;
  38. grid-template-columns: repeat(4,1fr);
  39. gap: 10px;
  40. place-items: center;
  41. }
  42. .content .active li{
  43. margin-top: 40px;
  44. border: 1px solid white;
  45. }
  46. .content .active a{
  47. display:grid;
  48. grid-template-rows: repeat(2,1fr);
  49. width: 224px;
  50. height: 180px;
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <div class="box">
  56. <!-- 栏目 -->
  57. <div class="type" style="display: flex; place-content: space-around;"></div>
  58. <!-- 内容 -->
  59. <div class="content"></div>
  60. </div>
  61. <script type="module">
  62. import * as tabs from './table.js';
  63. const type = document.querySelector('.type');
  64. const content = document.querySelector('.content');
  65. window.onload = ()=>tabs.createTab(type, content)
  66. type.onclick = ev => {
  67. tabs.setBtnStatus(ev);
  68. tabs.setContentStatus(ev, ev.target);
  69. };
  70. </script>
  71. </body>
  72. </html>
  1. // 创建栏目
  2. const cates = [
  3. {cid: 1, cname: '最新' },
  4. {cid: 2, cname: '工具下载' },
  5. {cid: 3, cname: 'js特效' },
  6. {cid: 4, cname: '网站源码/模板' },
  7. {cid: 5, cname: '网站素材' },
  8. {cid: 6, cname: '学习资源' }
  9. ]
  10. // 创建列表数据
  11. const details = [
  12. {
  13. key: 1,
  14. cid: 1,
  15. content: [
  16. {
  17. title: '涂鸦风格箭头结合矢量素材(eps+png)',
  18. url: 'https://www.php.cn/xiazai/sucai/2424',
  19. pic:"/tp/1.jpg"
  20. },
  21. {
  22. title: '俄罗斯宣布从赫尔松部分地区撤军',
  23. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  24. pic:'/tp/2.png'
  25. },
  26. {
  27. title: '俄罗斯宣布从赫尔松部分地区撤军',
  28. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  29. pic:'/tp/3.jpg'
  30. },
  31. {
  32. title: '涂鸦风格箭头结合矢量素材(eps+png)',
  33. url: 'https://www.php.cn/xiazai/sucai/2424',
  34. pic:"/tp/4.png"
  35. },
  36. {
  37. title: '俄罗斯宣布从赫尔松部分地区撤军',
  38. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  39. pic:'/tp/5.jpg'
  40. },
  41. {
  42. title: '俄罗斯宣布从赫尔松部分地区撤军',
  43. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  44. pic:'/tp/6.png'
  45. },
  46. {
  47. title: '涂鸦风格箭头结合矢量素材(eps+png)',
  48. url: 'https://www.php.cn/xiazai/sucai/2424',
  49. pic:"/tp/7.jpg"
  50. },
  51. {
  52. title: '俄罗斯宣布从赫尔松部分地区撤军',
  53. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  54. pic:'/tp/8.png'
  55. }
  56. ],
  57. },
  58. {
  59. key: 2,
  60. cid: 2,
  61. content: [
  62. {
  63. title: '影子变异图形创意动画特效',
  64. url: 'https://www.php.cn/xiazai/sucai/2424',
  65. pic:"https://img.php.cn/upload/webpage/000/287/557/636da89395665526.png"
  66. },
  67. {
  68. title: '俄罗斯宣布从赫尔松部分地区撤军',
  69. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  70. pic:'https://img.php.cn/upload/jscode/000/287/557/636da6bdf146b191.jpg'
  71. },
  72. {
  73. title: '俄罗斯宣布从赫尔松部分地区撤军',
  74. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  75. pic:'https://img.php.cn/upload/jscode/000/287/557/636da3f839de0151.png'
  76. },
  77. {
  78. title: '涂鸦风格箭头结合矢量素材(eps+png)',
  79. url: 'https://www.php.cn/xiazai/sucai/2424',
  80. pic:"https://img.php.cn/upload/jscode/000/000/164/636cbe7f2631b134.jpg"
  81. },
  82. {
  83. title: '俄罗斯宣布从赫尔松部分地区撤军',
  84. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  85. pic:'https://img.php.cn/upload/webpage/000/287/557/636c559e1bb5a646.png'
  86. },
  87. {
  88. title: '俄罗斯宣布从赫尔松部分地区撤军',
  89. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  90. pic:'https://img.php.cn/upload/webcode/000/287/557/62cb7ffe70ac6757.png'
  91. },
  92. {
  93. title: '涂鸦风格箭头结合矢量素材(eps+png)',
  94. url: 'https://www.php.cn/xiazai/sucai/2424',
  95. pic:"https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png"
  96. },
  97. {
  98. title: '俄罗斯宣布从赫尔松部分地区撤军',
  99. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  100. pic:'https://img.php.cn/upload/webcode/000/000/164/634e3f8d3e143257.jpg'
  101. }
  102. ],
  103. },
  104. {
  105. key: 3,
  106. cid: 3,
  107. content: [
  108. {
  109. title: '涂鸦风格箭头结合矢量素材(eps+png)',
  110. url: 'https://www.php.cn/xiazai/sucai/2424',
  111. pic:"https://img.php.cn/upload/webpage/000/287/557/636da89395665526.png"
  112. },
  113. {
  114. title: '俄罗斯宣布从赫尔松部分地区撤军',
  115. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  116. pic:'https://img.php.cn/upload/jscode/000/287/557/636da6bdf146b191.jpg'
  117. },
  118. {
  119. title: '俄罗斯宣布从赫尔松部分地区撤军',
  120. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  121. pic:'https://img.php.cn/upload/jscode/000/287/557/636da3f839de0151.png'
  122. },
  123. {
  124. title: '涂鸦风格箭头结合矢量素材(eps+png)',
  125. url: 'https://www.php.cn/xiazai/sucai/2424',
  126. pic:"https://img.php.cn/upload/jscode/000/000/164/636cbe7f2631b134.jpg"
  127. },
  128. {
  129. title: '俄罗斯宣布从赫尔松部分地区撤军',
  130. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  131. pic:'https://img.php.cn/upload/webpage/000/287/557/636c559e1bb5a646.png'
  132. },
  133. {
  134. title: '俄罗斯宣布从赫尔松部分地区撤军',
  135. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  136. pic:'https://img.php.cn/upload/webcode/000/287/557/62cb7ffe70ac6757.png'
  137. },
  138. {
  139. title: '涂鸦风格箭头结合矢量素材(eps+png)',
  140. url: 'https://www.php.cn/xiazai/sucai/2424',
  141. pic:"https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png"
  142. },
  143. {
  144. title: '俄罗斯宣布从赫尔松部分地区撤军',
  145. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  146. pic:'https://img.php.cn/upload/webcode/000/000/164/634e3f8d3e143257.jpg'
  147. }
  148. ],
  149. },
  150. {
  151. key: 4,
  152. cid: 4,
  153. content: [
  154. {
  155. title: '涂鸦风格箭头结合矢量素材(eps+png)',
  156. url: 'https://www.php.cn/xiazai/sucai/2424',
  157. pic:"https://img.php.cn/upload/webpage/000/287/557/636da89395665526.png"
  158. },
  159. {
  160. title: '俄罗斯宣布从赫尔松部分地区撤军',
  161. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  162. pic:'https://img.php.cn/upload/jscode/000/287/557/636da6bdf146b191.jpg'
  163. },
  164. {
  165. title: '俄罗斯宣布从赫尔松部分地区撤军',
  166. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  167. pic:'https://img.php.cn/upload/jscode/000/287/557/636da3f839de0151.png'
  168. },
  169. {
  170. title: '涂鸦风格箭头结合矢量素材(eps+png)',
  171. url: 'https://www.php.cn/xiazai/sucai/2424',
  172. pic:"https://img.php.cn/upload/jscode/000/000/164/636cbe7f2631b134.jpg"
  173. },
  174. {
  175. title: '俄罗斯宣布从赫尔松部分地区撤军',
  176. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  177. pic:'https://img.php.cn/upload/webpage/000/287/557/636c559e1bb5a646.png'
  178. },
  179. {
  180. title: '俄罗斯宣布从赫尔松部分地区撤军',
  181. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  182. pic:'https://img.php.cn/upload/webcode/000/287/557/62cb7ffe70ac6757.png'
  183. },
  184. {
  185. title: '涂鸦风格箭头结合矢量素材(eps+png)',
  186. url: 'https://www.php.cn/xiazai/sucai/2424',
  187. pic:"https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png"
  188. },
  189. {
  190. title: '俄罗斯宣布从赫尔松部分地区撤军',
  191. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  192. pic:'https://img.php.cn/upload/webcode/000/000/164/634e3f8d3e143257.jpg'
  193. }
  194. ],
  195. },
  196. {
  197. key: 5,
  198. cid: 5,
  199. content: [
  200. {
  201. title: '涂鸦风格箭头结合矢量素材(eps+png)',
  202. url: 'https://www.php.cn/xiazai/sucai/2424',
  203. pic:"https://img.php.cn/upload/webpage/000/287/557/636da89395665526.png"
  204. },
  205. {
  206. title: '俄罗斯宣布从赫尔松部分地区撤军',
  207. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  208. pic:'https://img.php.cn/upload/jscode/000/287/557/636da6bdf146b191.jpg'
  209. },
  210. {
  211. title: '俄罗斯宣布从赫尔松部分地区撤军',
  212. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  213. pic:'https://img.php.cn/upload/jscode/000/287/557/636da3f839de0151.png'
  214. },
  215. {
  216. title: '涂鸦风格箭头结合矢量素材(eps+png)',
  217. url: 'https://www.php.cn/xiazai/sucai/2424',
  218. pic:"https://img.php.cn/upload/jscode/000/000/164/636cbe7f2631b134.jpg"
  219. },
  220. {
  221. title: '俄罗斯宣布从赫尔松部分地区撤军',
  222. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  223. pic:'https://img.php.cn/upload/webpage/000/287/557/636c559e1bb5a646.png'
  224. },
  225. {
  226. title: '俄罗斯宣布从赫尔松部分地区撤军',
  227. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  228. pic:'https://img.php.cn/upload/webcode/000/287/557/62cb7ffe70ac6757.png'
  229. },
  230. {
  231. title: '涂鸦风格箭头结合矢量素材(eps+png)',
  232. url: 'https://www.php.cn/xiazai/sucai/2424',
  233. pic:"https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png"
  234. },
  235. {
  236. title: '俄罗斯宣布从赫尔松部分地区撤军',
  237. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  238. pic:'https://img.php.cn/upload/webcode/000/000/164/634e3f8d3e143257.jpg'
  239. }
  240. ],
  241. },
  242. {
  243. key: 6,
  244. cid: 6,
  245. content: [
  246. {
  247. title: '涂鸦风格箭头结合矢量素材(eps+png)',
  248. url: 'https://www.php.cn/xiazai/sucai/2424',
  249. pic:"https://img.php.cn/upload/webpage/000/287/557/636da89395665526.png"
  250. },
  251. {
  252. title: '俄罗斯宣布从赫尔松部分地区撤军',
  253. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  254. pic:'https://img.php.cn/upload/jscode/000/287/557/636da6bdf146b191.jpg'
  255. },
  256. {
  257. title: '俄罗斯宣布从赫尔松部分地区撤军',
  258. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  259. pic:'https://img.php.cn/upload/jscode/000/287/557/636da3f839de0151.png'
  260. },
  261. {
  262. title: '涂鸦风格箭头结合矢量素材(eps+png)',
  263. url: 'https://www.php.cn/xiazai/sucai/2424',
  264. pic:"https://img.php.cn/upload/jscode/000/000/164/636cbe7f2631b134.jpg"
  265. },
  266. {
  267. title: '俄罗斯宣布从赫尔松部分地区撤军',
  268. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  269. pic:'https://img.php.cn/upload/webpage/000/287/557/636c559e1bb5a646.png'
  270. },
  271. {
  272. title: '俄罗斯宣布从赫尔松部分地区撤军',
  273. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  274. pic:'https://img.php.cn/upload/webcode/000/287/557/62cb7ffe70ac6757.png'
  275. },
  276. {
  277. title: '涂鸦风格箭头结合矢量素材(eps+png)',
  278. url: 'https://www.php.cn/xiazai/sucai/2424',
  279. pic:"https://img.php.cn/upload/webcode/000/287/557/6340dac18f876183.png"
  280. },
  281. {
  282. title: '俄罗斯宣布从赫尔松部分地区撤军',
  283. url: 'https://news.ifeng.com/c/8KoK54urn1k',
  284. pic:'https://img.php.cn/upload/webcode/000/000/164/634e3f8d3e143257.jpg'
  285. }
  286. ],
  287. }
  288. ]
  289. // 创建样目和对应的内容区
  290. function createTab(type, content) {
  291. // 1. 生成样目
  292. for (let i = 0; i < cates.length; i++) {
  293. // (1) 创建一个按钮
  294. const btn = document.createElement('button');
  295. // (2) 设置按钮的文本
  296. btn.textContent = cates[i].cname;
  297. // (3) 给按钮添加一个自定义 data-key, 主要是为了一内容id绑定
  298. btn.dataset.key = cates[i].cid;
  299. // (4) 默认高亮第1个,所以第一个加上class="active"
  300. if (i === 0) btn.classList.add('active');
  301. // (5) 将新按钮, 添加到栏目容器元素中 type
  302. type.append(btn);
  303. }
  304. // 2. 生成内容
  305. for (let i = 0; i < details.length; i++) {
  306. // (1) 创建列表 <ul>
  307. const ul = document.createElement('ul');
  308. // (2) 添加列表索引<ul data-key>
  309. ul.dataset.key = details[i].cid;
  310. // (3) 默认显示第1个,其它隐藏
  311. ul.classList.add(i === 0 ? 'active' : 'hidden');
  312. // (4) 生成子元素<li><a>用于显示每一条数据
  313. for (let k = 0; k < details[i].content.length; k++) {
  314. // 1. 生成 <li>
  315. const li = document.createElement('li');
  316. // 2. 生成 <a>
  317. const a = document.createElement('a');
  318. const img = document.createElement('img');
  319. img.src = details[i].content[k].pic;
  320. // 3. a.href
  321. a.href = details[i].content[k].url;
  322. // 4. a.textContent
  323. a.textContent = details[i].content[k].title;
  324. a.insertAdjacentElement('afterbegin',img)
  325. // 5. 将<a>添加到<li>
  326. li.append(a);
  327. // 6. <li>添加到<ul>
  328. ul.append(li);
  329. // 7. <ul>添加到内容容器中.content
  330. content.append(ul);
  331. }
  332. }
  333. }
  334. // 设置按钮高亮
  335. function setBtnStatus(ev) {
  336. // 1. 当前按钮
  337. const currentBtn = ev.target;
  338. // 2. 去掉所有按钮的active, 遍历
  339. // ev.currentTarget: 事件绑定主体 , 父元素
  340. [...ev.currentTarget.children].forEach(btn => btn.classList.remove('active'));
  341. // 3. 设置当前按钮高亮
  342. currentBtn.classList.add('active');
  343. }
  344. // 设置内容状态: 与按钮对应的内容显示出来
  345. function setContentStatus(ev, currentBtn) {
  346. // 1. 获取所有列表
  347. const lists = document.querySelectorAll('.content > ul');
  348. // 2. 去掉所有列表active,换成hidden
  349. lists.forEach(list => list.classList.replace('active', 'hidden'));
  350. // 3. 找到与栏目key对应的列表
  351. // lists: NodeList对象, 不是数组
  352. const currentList = [...lists].find(list => list.dataset.key == currentBtn.dataset.key);
  353. // 返回当前应该高亮显示的列表
  354. // 4. 将要显示的列表,加上active,显示出来
  355. currentList.classList.replace('hidden', 'active');
  356. }
  357. export { createTab, setBtnStatus, setContentStatus };
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议