JavaScript 选项卡实例（模块方法）- 仿php中文网首页“手册教程”

选项卡实例（模块方法）- 仿php中文网首页“手册教程”

页面效果

HTML 代码

<div class="manualBox">
  <div class="manualTab">
    <h2>手册教程</h2>
  </div>
  <div class="manualContent"></div>
</div>
<script type="module">
  // 获取选项卡容器元素
  const tab = document.querySelector('.manualTab')
  // 获取内容区容器元素
  const content = document.querySelector('.manualContent')
  // 导入模块
  import * as tabs from './tabs.js'
  // 页面载入时自动生成选项卡和内容
  window.onload = tabs.createTab(tab,content);
  // 点击选项卡按钮切换
  tab.onclick = ev =>{
    tabs.setTabMenu(ev);
    tabs.setContent(ev,ev.target);
  }
</script>

JavaScript 代码

/**
 * @desc 创建选项卡区按钮组数组 tabMenu[]
 * @param {number} tabId - 选项卡ID
 * @param {string} tabName - 选项卡文本内容
 */
const tabMenu = [
  {tabId: 1, tabName: '推荐'},
  {tabId: 2, tabName: '最新'},
  {tabId: 3, tabName: '热门'},
]
/**
 * @desc 创建内容区数组 details[]
 * @param {number} key - 内容区key == tabId
 * @param {array} content - 内容区数组
 * @param {string} src - 内容图片 src
 * @param {string} title - 内容标题
 * @param {string} brief - 内容介绍
 */
const details = [
  {
    key: 1,
    content: [
      {
        src: 'https://img.php.cn/upload/course/000/000/001/6221dba306f53195.png',
        title: 'php完全自学手册',
        brief: '欢迎朋友们加入php自学的行列，php语言是一门入门简单，容易上手的通用开源脚本语言',
      },
      ......
    ],
  },
  { key: 2, content: [ ...... ], },
  { key: 3, content: [ ...... ], },
]
/**
 * @desc 创建栏目和内容函数 createTab(tab, content)
 * @param {Element} tab - 选项卡容器
 * @param {Element} content - 内容区容器
 */
function createTab(tab, content) {
  // 1. 生成选项卡
  const div = document.createElement('div')
  for (let i = 0; i < tabMenu.length; i++) {
    const btn = document.createElement('button')
    btn.textContent = tabMenu[i].tabName
    // 为每个按钮添加一个自定义属性: data-key
    // data-key = tabMenu[i].key
    btn.dataset.key = tabMenu[i].tabId
    // 默认第一个按钮高亮显示
    if (i === 0) {
      btn.classList.add('active')
    }
    div.append(btn)
  }
  tab.append(div)
  // 2. 生成内容
  for (let i = 0; i < details.length; i++) {
    // 创建<ul>
    const ul = document.createElement('ul')
    // 为每个<ul>添加自定义属性data-key
    ul.dataset.key = details[i].key
    // 全部内容加载时,默认全隐藏,只要显示第一个按钮对应的内容
    ul.classList.add(i === 0 ? 'active' : 'hidden')
    // 循环: 将与按钮对应的数据全部渲染出来
    for (let j = 0; j < details[i].content.length; j++) {
      const li = document.createElement('li')
      const img = document.createElement('img')
      img.src = details[i].content[j].src
      const div = document.createElement('div')
      const h4 = document.createElement('h4')
      const p = document.createElement('p')
      h4.textContent = details[i].content[j].title
      p.textContent = details[i].content[j].brief
      div.append(h4)
      div.append(p)
      li.append(img)
      li.append(div)
      ul.append(li)
      content.append(ul)
    }
  }
}
/**
 * @desc 设置选项卡激活函数 setTabMenu(ev)
 * @param {} ev - 事件（点击事件）
 */
function setTabMenu(ev){
  // 如果点击的不是按钮则返回
  if (ev.target.tagName !== 'BUTTON') return false;
  // 先取消所有选项卡激活状态
  ;[...ev.target.parentElement.children].forEach(btn => btn.classList.remove('active'))
  // 再把当前选项卡设置为激活状态
  ev.target.classList.add('active')
}
/**
 * @desc 设置内容区切换激活函数 currentTab(ev，currentTab)
 * @param {} ev - 事件（点击事件）
 * @param {Element} currentTab - 事件（点击事件）
 */
function setContent(ev, currentTab){
  // 如果点击的不是按钮则返回
  if (ev.target.tagName !== 'BUTTON') return false;
  // 获取内容区所有 ul，并全部设置为 hidden
  const contentLists = document.querySelectorAll('.manualContent > ul')
  contentLists.forEach(list => list.classList.replace('active', 'hidden'))
  // 将与当前选项卡对应的 ul 设置为 active
  const currentList = [...contentLists].find(list => list.dataset.key === currentTab.dataset.key)
  currentList.classList.replace('hidden','active')
}
// 导出模块
export {tabMenu,details,createTab,setTabMenu,setContent}