css设置图片不响应触摸_如何使用CSS和触摸JavaScript构建响应式标签组件

css设置图片不响应触摸

在本教程中，我们将学习如何使用CSS和少量JavaScript构建响应式标签组件。 绝对可以创建纯CSS选项卡组件，但是对于本示例，我们将其JavaScript技能付诸实践。

这是我们将要逐步构建的内容：

注意 ：本教程不会重点介绍如何使选项卡组件可访问，因此，探索可访问性无疑是下一步的有效选择。

1. HTML

首先，让我们检查所需的标记。 我们有一个容器，其中包含选项卡本身（列表项）以及每个选项卡的内容（选项卡面板）。 要将标签与相应的面板相关联，我们使用data-index自定义属性，该属性为每个标签面板保留唯一的值。 也就是说，由于基于零的编号， data-index = 0的面板与第一个选项卡关联， data-index = 1的面板与第二个选项卡关联，依此类推。

这是HTML标记：

<div class="tabs-container">
  <ul class="tabs">
    <li class="active">
      <a href="">Part 1</a>
    </li>
    <li>
      <a href="">Part 2</a>
    </li>
    <li>
      <a href="">Part 3</a>
    </li>
  </ul>
  <div class="tabs-content">
    <div class="tabs-panel active" data-index="0">
      <!-- content here -->
    </div>
    <div class="tabs-panel" data-index="1">
      <!-- content here -->
    </div>
    <div class="tabs-panel" data-index="2">
      <!-- content here -->
    </div>
  </div>
</div>

2. CSS

下一步，我们为组件指定一些CSS规则。 没什么花哨的，只是一些基本样式。 需要注意的一件事是，我们不使用任何过渡（例如淡入淡出，滑动）来切换选项卡面板。 而是通过一个简单的开/关开关来显示和消失它们。

以下是初始样式：

.tabs-container {
  max-width: 1000px;
  margin: 50px auto;
  padding: 25px;
}

.tabs {
  display: flex;
}

.tabs li:not(:last-child) {
  margin-right: 7px;
}

.tabs li a {
  display: block;
  position: relative;
  top: 4px;
  padding: 10px 25px;
  border-radius: 2px 2px 0 0;
  background: white;
  opacity: 0.7;
  transition: all 0.1s ease-in-out;
}

.tabs li.active a,
.tabs li a:hover {
  opacity: 1;
  top: 0;
}

.tabs-content {
  position: relative;
  z-index: 2;
  padding: 25px;
  border-radius: 0 4px 4px 4px;
  background: white;
}

.tabs-panel {
  display: none;
}

.tabs-panel.active {
  display: block;
}

3. JavaScript

有了HTML和CSS之后，就可以查看所需JavaScript代码了。

每次单击选项卡时，我们都会执行以下操作：

• 从相应的选项卡（默认为第一个）和关联的选项卡面板（默认为第一个）中删除active类。
• 找到li此选项卡的家长，在添加active类给它，并检索其索引。
• 找到其属性值（用于data-index属性）与上述索引值相匹配的选项卡面板，然后向其分配active类。

这是生成JavaScript代码：

const tabLinks = document.querySelectorAll(".tabs a");
const tabPanels = document.querySelectorAll(".tabs-panel");

for(let el of tabLinks) {
  el.addEventListener("click", e => {
    e.preventDefault();
    
    document.querySelector('.tabs li.active').classList.remove("active");
    document.querySelector('.tabs-panel.active').classList.remove("active");

    const parentListItem = el.parentElement;
    parentList.classList.add("active");
    const index = [...parentListItem.parentElement.children].indexOf(parentListItem);
    
    const panel = [...tabPanels].filter(el => el.getAttribute("data-index") == index);
    panel[0].classList.add("active");
  });
}

4.积极响应

我们的组件快要准备好了！ 我们要做的最后一件事是使组件具有响应能力。 因此，例如，当视口的最大宽度为600px时，它应该折叠起来，如下所示：

当我们使用桌面优先方法时，这些是我们必须覆盖CSS规则：

@media screen and (max-width: 600px) {
  .tabs {
    flex-direction: column;
  }
    
  .tabs li {
    width: 100%;
  }
    
  .tabs li:not(:last-child) {
    margin-right: 0;
  }
    
  .tabs li a {
    border-radius: 0;
    opacity: 1;
    top: 0;
  }
    
  .tabs li.active a::before {
    content: '•';
    padding-right: 5px;
  }
    
  .tabs-content {
    border-radius: 0;
  }
}

5.浏览器支持

我们的演示可以在所有最新的浏览器和设备上正常运行。 和我的教程一样，我们使用Babel将ES6代码编译为ES5。

结论

在这个简短的教程中，我们设法使用HTML，CSS和JavaScript创建了一个有用的响应式标签组件。 同样，该组件无法正确访问，但是如果您要增强其功能，那么下一步将是不错的选择。 编码愉快！

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-build-a-responsive-tab-component-with-css-and-a-touch-of-javascript--cms-30456

css设置图片不响应触摸