Blogger Information
Blog 25
fans 0
comment 0
visits 13657
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
基于JS模块的选项卡实现
安超
Original
522 people have browsed it

1.基于JS模块的选项卡的实现主要有几个要点:

选项卡效果图如下:
选项卡效果图

2.html搭建基本框架

基于JS的选项卡的实现,基本上由JS的模块实现。
html搭建好基本框架,内容有JS动态填充。

  1. <div class="box">
  2. /* 选项卡选项*/
  3. <div class="menu"></div>
  4. /*选项卡内容*/
  5. <div class="content"></div>
  6. </div>

3.CSS实现基本样式

样式中最主要的时.hidden 和.active。用来切换内容的显示状态:显示或者不显示。

  1. <style>
  2. /* 目录选中状态时的样式 */
  3. .box .menu .active {
  4. display:block;
  5. background-color: green;
  6. }
  7. /* 内容选中状态时的样式 */
  8. .box .content .active{
  9. background-color: cornsilk;
  10. }
  11. /* 隐藏样式 */
  12. .hidden{
  13. display: none;
  14. }
  15. /* 目录,flex布局是为了盒子里的内容横排 */
  16. .menu{
  17. display: flex;
  18. }
  19. /* 目录里的按钮为圆角样式 */
  20. .menu button{
  21. border-radius: 10px;
  22. margin-left: 5px;
  23. }
  24. .box .content ul{
  25. list-style: none;
  26. margin-left: -30px;
  27. }
  28. .box .content ul li:nth-of-type(2n){
  29. background-color: rgb(224, 220, 228);
  30. }
  31. </style>

3.在html中实现JS模块的调用

  1. <!-- 导入模块时,scripttype必须是module -->
  2. <script type="module">
  3. // 导入模块,注意,用了别名,所以后续引用模块中的到处项时,必须使用.的形式
  4. import * as tab from "./content.js"; //注意模块的路径和别名的使用
  5. // 获取选项标题
  6. const menu = document.querySelector('.menu');
  7. // 获取每个选项下对应的内容
  8. const content = document.querySelector('.content');
  9. // 加载选项标题和选项内容
  10. window.onload = ()=>tab.createTab(menu,content);
  11. // 点击选项卡目录时,改变选中卡的背景色并切换选项卡内容,第二个参数是为了简化模块中的代码
  12. menu.onclick = (ev)=> tab.changeItems(menu,ev.target);
  13. </script>

4.JS模块

js模块包括动态建立DOM元素所需要的数据和函数。主要有选项卡的栏目及其对应的内容

  1. // 选项卡目录
  2. const menu =[
  3. {cid:1,content:"menu_1"},
  4. {cid:2,content:"menu_2"},
  5. {cid:3,content:"menu_3"}
  6. ];
  7. // 项目卡内容
  8. // 在visual studio code编辑器里,摁住alt后,鼠标左键单击多行中的某片段,可以更改多个地方。
  9. const neirong = [
  10. {key:1,cid:1,ncontent:[{url:"https://www.jacgoo.com",content:"试验测试网络1"},{url:"https://www.jacgoo.com",content:"环宇测试网1"},{url:"https://www.php.cn",content:"php中文网1"}]},
  11. {key:2,cid:2,ncontent:[{url:"https://www.jacgoo.com",content:"试验测试网络2"},{url:"https://www.jacgoo.com",content:"环宇测试网2"},{url:"https://www.php.cn",content:"php中文网2"}]},
  12. {key:3,cid:3,ncontent:[{url:"https://www.jacgoo.com",content:"试验测试网络3"},{url:"https://www.jacgoo.com",content:"环宇测试网3"},{url:"https://www.php.cn",content:"php中文网3"}]}
  13. ]
  14. function createTab(type,card){
  15. // 创建项目目录
  16. for(let i = 0 ; i < menu.length;i++){
  17. const btn = document.createElement('button');
  18. // 添加按钮的文本内容
  19. btn.textContent = menu[i].content;
  20. // 添加按钮的data-key属性
  21. btn.dataset.key = menu[i].cid;
  22. // 将第一个按钮家加上active样式
  23. if(i === 0 ) btn.classList.add('active');
  24. type.append(btn);
  25. }
  26. //创建内容
  27. //1.创建ul
  28. for(let j = 0 ;j < neirong.length;j++){
  29. const ul = document.createElement("ul");
  30. //为ul添加data-key属性,便于改变目录时改变内容
  31. ul.dataset.key = neirong[j].cid;
  32. // 创建每个ul下的li和a
  33. for(let k = 0 ;k < neirong[j].ncontent.length;k++){
  34. const li = document.createElement('li');
  35. const a = document.createElement('a');
  36. a.href = neirong[j].ncontent[k].url;
  37. a.textContent = neirong[j].ncontent[k].content;
  38. li.append(a);
  39. ul.append(li);
  40. }
  41. ul.classList.add(j === 0?'active':'hidden');
  42. card.append(ul);
  43. }
  44. }
  45. // 点击目录里的选项时,改变活动目录的背景色,同时改变内容
  46. function changeItems(type,ev){
  47. // 获取所点目录的key值
  48. const key = ev.dataset.key;
  49. console.log(type);
  50. // 去掉目录里所有的active类
  51. [...type.children].forEach(btn => btn.classList.remove('active'));
  52. // 为目录里的key值等于常亮key的button加上active类
  53. [...type.children].find(btn => btn.dataset.key === key).classList.add('active');
  54. // 找到目录选项卡的近邻兄弟元素content
  55. const con = type.nextElementSibling;
  56. console.log(con.children);
  57. // 去掉内容上的active类;
  58. [...con.children].forEach(nr => nr.classList.replace('active','hidden'));
  59. [...con.children].find(nr => nr.dataset.key === key).classList.replace('hidden','active');
  60. }
  61. export {createTab,changeItems};
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:总结的很好, 继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!