Material Design 中实现带有多视图的卡片效果

在 Material Design 中，使用卡片（Card）可将内容封装成一种干净、整洁且具有层次感的 UI 元素。本文将介绍如何使用 Material Design 实现带有多视图的卡片效果，在单个卡片中显示多个相关视图。

卡片与多视图

卡片是 Material Design 中常用的一个元素，它可以包含各种类型的内容，如图片、文本、按钮等。而多视图则是指在同一个空间内，通过切换不同的视图呈现不同的内容，例如在商品详情页面，通过点击“产品信息”、“评价”和“问答”三个标签来更换展示的内容。

代码实现

下面我们通过一个示例演示如何使用 Material Design 实现带有多视图的卡片效果。

首先，在 HTML 文件中添加一个卡片容器 div，以及用于切换视图的标签：

// javascriptcn.com 代码示例
<div class="card">
  <div class="views">
    <a href="#" class="view active">View 1</a>
    <a href="#" class="view">View 2</a>
    <a href="#" class="view">View 3</a>
  </div>
  <div class="content">
    <div class="view active">
      <h2>View 1</h2>
      <p>This is the content for View 1.</p>
    </div>
    <div class="view">
      <h2>View 2</h2>
      <p>This is the content for View 2.</p>
    </div>
    <div class="view">
      <h2>View 3</h2>
      <p>This is the content for View 3.</p>
    </div>
  </div>
</div>

然后，在 CSS 文件中定义卡片容器和多视图的样式：

// javascriptcn.com 代码示例
.card {
  width: 400px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  overflow: hidden;
}

.views {
  display: flex;
  justify-content: space-between;
  background-color: #f1f1f1;
}

.view {
  padding: 16px;
  color: #555;
  text-decoration: none;
  font-size: 16px;
}

.view.active {
  background-color: #ccc;
}

.content {
  padding: 32px;
}

.content .view:not(.active) {
  display: none;
}

最后，在 JavaScript 文件中实现标签的点击事件，以及切换视图的逻辑：

// javascriptcn.com 代码示例
const views = document.querySelectorAll('.view');
views.forEach((view) => {
  view.addEventListener('click', (event) => {
    event.preventDefault();
    const viewId = event.target.getAttribute('href').substr(1);

    views.forEach((v) => {
      v.classList.remove('active');
    });

    event.target.classList.add('active');

    const contentViews = document.querySelectorAll('.content .view');

    contentViews.forEach((cv) => {
      if (cv.getAttribute('id') === viewId) {
        cv.classList.add('active');
      } else {
        cv.classList.remove('active');
      }
    });
  });
});

以上就是实现带有多视图的卡片效果的全部内容，你可以通过这个链接查看完整的代码和演示效果。

总结

在本文中我们介绍了 Material Design 中如何实现带有多视图的卡片效果。通过使用标签切换视图和设置样式隐藏其他视图，可以轻松地实现一个干净整洁的 UI 元素，帮助优化用户体验。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6529146f7d4982a6ebba6142