使用HTML和CSS设计响应式选项卡效果

选项卡是常见的网页设计元素之一，在页面中通常用于切换不同的内容。本文将介绍如何使用HTML和CSS设计响应式选项卡效果，并提供详细的教学和代码案例。


HTML结构

首先，我们需要使用HTML定义选项卡的基本结构。以下是一个基本的选项卡结构示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="tabs">
  <ul class="tab-links">
    <li class="active"><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab active">
      <p>Tab 1 content goes here.</p>
    </div>
    <div id="tab2" class="tab">
      <p>Tab 2 content goes here.</p>
    </div>
    <div id="tab3" class="tab">
      <p>Tab 3 content goes here.</p>
    </div>
  </div>
</div>

在这个例子中，选项卡由一个具有“tabs”类的容器包含。容器中包含一个具有“tab-links”类的ul元素，该元素用于显示选项卡标题。每个选项卡由一个具有“tab”类的div元素表示，选项卡内容位于该div元素内。


CSS样式

接下来，我们需要为选项卡添加样式。以下是一个基本的样式示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* 隐藏所有选项卡内容 */
.tab-content .tab {
  display: none;
}
 
/* 显示当前选项卡内容 */
.tab-content .active {
  display: block;
}
 
/* 标题链接样式 */
.tab-links a {
  padding: 8px 12px;
  display: inline-block;
  border-radius: 4px 4px 0 0;
  background-color: #f2f2f2;
  margin-right: 4px;
}
 
/* 激活链接样式 */
.tab-links .active a {
  background-color: #fff;
}
 
/* 鼠标悬停链接样式 */
.tab-links a:hover {
  background-color: #ccc;
}

在这个例子中，我们首先隐藏所有选项卡内容，然后为当前选项卡内容添加“active”类以显示其内容。我们还定义了选项卡标题链接的样式，包括背景颜色、边距和圆角等。


JavaScript函数

最后，我们需要编写JavaScript函数以处理选项卡的交互。以下是一个基本的JavaScript函数示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tab");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tab-links")[0].getElementsByTagName("a");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}
 
// 默认打开第一个选项卡
document.getElementById("defaultOpen").click();

在这个例子中，“openTab”函数用于显示选项卡内容。函数接受两个参数：事件和选项卡名称。它首先隐藏所有选项卡内容，然后显示指定选项卡的内容。函数还更新选项卡标题链接的样式以反映当前选项卡的状态。最后，我们使用“defaultOpen”函数来默认打开第一个选项卡。


完整示例代码

以下是一个完整的HTML、CSS和JavaScript示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<div class="tabs">
  <ul class="tab-links">
    <li class="active"><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab active">
      <p>Tab 1 content goes here.</p>
    </div>
    <div id="tab2" class="tab">
      <p>Tab 2 content goes here.</p>
    </div>
    <div id="tab3" class="tab">
      <p>Tab 3 content goes here.</p>
    </div>
  </div>
</div>
 
<style>
/* 隐藏所有选项卡内容 */
.tab-content .tab {
  display: none;
}
 
/* 显示当前选项卡内容 */
.tab-content .active {
  display: block;
}
 
/* 标题链接样式 */
.tab-links a {
  padding: 8px 12px;
  display: inline-block;
  border-radius: 4px 4px 0 0;
  background-color: #f2f2f2;
  margin-right: 4px;
}
 
/* 激活链接样式 */
.tab-links .active a {
  background-color: #fff;
}
 
/* 鼠标悬停链接样式 */
.tab-links a:hover {
  background-color: #ccc;
}
</style>
 
<script>
function openTab(evt, tabName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tab");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tab-links")[0].getElementsByTagName("a");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}
 
// 默认打开第一个选项卡
document.getElementById("defaultOpen").click();
</script>

以上是一个简单而又实用的响应式选项卡效果的代码，希望本文能帮助您更好地理解和掌握HTML和CSS的应用，同时提高您的编程水平。


本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

猿教程
请先登录后发表评论
  • 最新评论
  • 总共0条评论