HTML左侧列表和右侧功能显示

发表于源码基地I版块 html
HTML左侧列表和右侧功能显示
代码：
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>左侧列表和右侧功能显示</title>

    <style>
      .container {
        display: flex;

        width: 1175px;

        height: calc(100vh - 10px); /* 设置内容区域高度为视口高度减去10px */

        border: 1px solid #ccc;

        overflow: hidden;
      }

      .sidebar {
        flex: 1;

        background-color: #f0f0f0;

        padding: 20px;

        border-right: 1px solid #ccc;

        overflow-y: auto;
      }

      .main-content {
        flex: 3;

        padding: 20px;

        overflow-y: auto; /* 如果内容过多，可以允许内容区域滚动 */
      }

      .sidebar ul {
        list-style-type: none;

        padding: 0;
      }

      .sidebar li {
        margin-bottom: 10px;

        cursor: pointer;
      }

      .sidebar li:hover {
        color: #007bff;
      }

      .selected {
        color: #007bff;

        font-weight: bold;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="sidebar">
        <!-- 添加更多选项 -->
      </div>

      <div class="main-content" id="mainContent">
        <h>请选择</h>
      </div>
    </div>

    <script>
      // 获取选项容器
      const sidebar = document.querySelector('.sidebar');
      // 获取内容区域
      const mainContent = document.getElementById('mainContent');

      // 数据
      const list = [
        {
          id: 0,
          name: '淘宝',
          url: 'https://www.taobao.com/',
        },
        {
          id: 1,
          name: '大众点评',
          url: 'https://www.dianping.com/',
        },
        {
          id: 2,
          name: '天猫',
          url: 'https://www.tmall.com/',
        },
        {
          id: 3,
          name: '1688',
          url: 'https://p4psearch.1688.com/',
        },
        {
          id: 4,
          name: '携程旅行',
          url: 'https://www.ctrip.com/',
        },
        {
          id: 5,
          name: 'BOSS直聘',
          url: 'https://www.zhipin.com/',
        },
        {
          id: 6,
          name: '新浪',
          url: 'https://www.sina.com.cn/',
        },
        {
          id: 7,
          name: '汽车之家',
          url: 'https://www.autohome.com.cn/',
        },
        {
          id: 8,
          name: '凤凰网',
          url: 'https://www.ifeng.com/',
        },
        {
          id: 9,
          name: '百度一下',
          url: 'https://www.baidu.com',
        },
      ];

      // 创建 ul
      const listElement = document.createElement('ul');

      list.forEach((item) => {
        const li = document.createElement('li');
        // 设置 li 的文本内容
        li.textContent = item.name;
        // 添加点击事件监听器
        li.addEventListener('click', (e) => showContent(e, item));
        // 插入 li 到 ul
        listElement.appendChild(li);
      });

      sidebar.appendChild(listElement);

      // 保存最后选择的选项
      let lastSelectedLi;

      /**
       * 显示内容
       * @Param {Event} e 点击事件
       * @Param {Object} option 选项
       */
      function showContent(e, { url }) {
        // 清除当前选项的样式
        if (lastSelectedLi) {
          lastSelectedLi.classList.remove('selected');
        }

        // 添加选中选项的样式
        const selectedLi = e.target;
        selectedLi.classList.add('selected');

        // 保存最后选择的选项
        lastSelectedLi = selectedLi;

        // 根据选项显示对应的内容
        mainContent.innerHTML = `<iframe src="${url}" width="100%" height="600px"></iframe>`;
      }
    </script>
  </body>
</html>
2024-08-05 13:45
评论列表评论