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创建了一个有用的响应式标签组件。 同样,该组件无法正确访问,但是如果您要增强其功能,那么下一步将是不错的选择。 编码愉快!
css设置图片不响应触摸