4种酷炫选项卡交互效果实战

战神哥

于 2024-08-26 11:12:18 发布

阅读量837

点赞数 9

本文链接：https://blog.csdn.net/weixin_35755640/article/details/141610659

版权

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

简介：选项卡是网页设计中常见的元素，用于组织和展示大量信息。本教程将介绍四种独特的选项卡设计效果，包括基本选项卡、彩色带图标选项卡、下划线样式选项卡和垂直选项卡。我们将使用jQuery库来实现这些效果，涵盖事件处理、动画和浏览器兼容性。通过实践这些设计，开发者可以提升前端技能，创建更具交互性和吸引力的网页项目。 4种超酷Tabs选项卡设计效果

1. jQuery选项卡交互基础

选项卡是一种常见的交互元素，允许用户在多个内容面板之间切换。jQuery提供了强大的功能，可以轻松创建和自定义选项卡交互。本教程将介绍jQuery选项卡交互的基础知识，包括HTML结构、CSS样式和jQuery代码。

2.1 HTML结构

在HTML结构中，我们将创建一个包含选项卡菜单和选项卡内容的容器元素。

<div class="tabs">
  <ul class="tabs-menu">
    <li><a href="#tab1">选项卡 1</a></li>
    <li><a href="#tab2">选项卡 2</a></li>
    <li><a href="#tab3">选项卡 3</a></li>
  </ul>
  <div class="tabs-content">
    <div id="tab1" class="tab-content">
      <p>选项卡 1 内容</p>
    </div>
    <div id="tab2" class="tab-content">
      <p>选项卡 2 内容</p>
    </div>
    <div id="tab3" class="tab-content">
      <p>选项卡 3 内容</p>
    </div>
  </div>
</div>

<div class="tabs"> ：选项卡容器元素。
<ul class="tabs-menu"> ：选项卡菜单元素。
<li> ：选项卡菜单项元素。
<a> ：选项卡菜单链接元素，用于切换选项卡内容。
<div class="tabs-content"> ：选项卡内容容器元素。
<div id="tab1" class="tab-content"> ：选项卡内容元素，与选项卡菜单项链接的href属性相对应。

每个选项卡菜单项链接的 href 属性值对应于选项卡内容元素的 id 属性值，从而建立了选项卡菜单项和选项卡内容之间的关联。

3. 彩色带图标选项卡设计与实现

3.1 HTML结构

彩色带图标选项卡的HTML结构与基本选项卡类似，主要区别在于选项卡项中添加了图标元素。

<div class="tabs">
  <ul class="tab-links">
    <li><a href="#tab1"><i class="fa fa-home"></i> Home</a></li>
    <li><a href="#tab2"><i class="fa fa-user"></i> Profile</a></li>
    <li><a href="#tab3"><i class="fa fa-envelope"></i> Messages</a></li>
  </ul>

  <div class="tab-content">
    <div id="tab1">...</div>
    <div id="tab2">...</div>
    <div id="tab3">...</div>
  </div>
</div>

3.2 CSS样式

CSS样式主要负责选项卡的外观和布局。

.tabs {
  width: 100%;
  margin: 0 auto;
}

.tab-links {
  list-style: none;
  display: flex;
  justify-content: center;
}

.tab-links li {
  margin: 0 10px;
}

.tab-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 50px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  color: #000;
  text-decoration: none;
}

.tab-links a:hover {
  background-color: #eee;
}

.tab-content {
  width: 100%;
  height: 500px;
  border: 1px solid #ccc;
  border-top: none;
  padding: 20px;
}

.tab-content div {
  display: none;
}

.tab-content div.active {
  display: block;
}

3.3 jQuery代码

jQuery代码用于控制选项卡的交互行为。

$(document).ready(function() {
  // 选项卡链接点击事件
  $(".tab-links a").click(function(e) {
    e.preventDefault();

    // 获取当前选项卡项
    var currentTab = $(this).attr("href");

    // 隐藏所有选项卡内容
    $(".tab-content div").hide();

    // 显示当前选项卡内容
    $(currentTab).show();

    // 移除所有选项卡项的激活状态
    $(".tab-links a").removeClass("active");

    // 添加激活状态到当前选项卡项
    $(this).addClass("active");
  });
});

4. 下划线样式选项卡设计与实现

4.1 HTML结构

下划线样式选项卡的HTML结构与基本选项卡类似，主要区别在于添加了一个 <ul> 列表来显示选项卡标题，并在每个 <li> 元素中添加一个 <a> 链接。 <a> 链接的 href 属性指向对应的选项卡内容。

<!DOCTYPE html>
<html>
<head>
  <title>下划线样式选项卡</title>
  <style>
    /* ... CSS样式 ... */
  </style>
</head>
<body>
  <ul class="tabs">
    <li><a href="#tab1">选项卡1</a></li>
    <li><a href="#tab2">选项卡2</a></li>
    <li><a href="#tab3">选项卡3</a></li>
  </ul>
  <div class="tab-content">
    <div id="tab1">选项卡1的内容</div>
    <div id="tab2">选项卡2的内容</div>
    <div id="tab3">选项卡3的内容</div>
  </div>
</body>
</html>

4.2 CSS样式

下划线样式选项卡的CSS样式主要用于设置选项卡标题的样式，包括字体、颜色、大小等。此外，还需设置选项卡内容的样式，包括背景色、边框等。

/* 选项卡标题样式 */
.tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style-type: none;
}

.tabs li {
  margin: 0 10px;
}

.tabs a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #000;
}

.tabs a:hover {
  color: #fff;
  background-color: #000;
}

/* 选项卡内容样式 */
.tab-content {
  display: none;
}

.tab-content div {
  padding: 20px;
}

4.3 jQuery代码

下划线样式选项卡的jQuery代码与基本选项卡类似，主要用于切换选项卡内容。当用户点击选项卡标题时，jQuery会隐藏所有选项卡内容，然后显示与该标题对应的选项卡内容。

$(function() {
  $(".tabs a").click(function(e) {
    e.preventDefault();
    var tabId = $(this).attr("href");
    $(".tab-content").hide();
    $(tabId).show();
  });
});

4.4 选项卡切换效果

下划线样式选项卡的切换效果是通过jQuery的 show() 和 hide() 方法实现的。当用户点击选项卡标题时，jQuery会隐藏所有选项卡内容，然后显示与该标题对应的选项卡内容。

4.5 选项卡内容显示

下划线样式选项卡的内容显示是通过CSS的 display 属性控制的。当选项卡内容被隐藏时，其 display 属性设置为 none ；当选项卡内容被显示时，其 display 属性设置为 block 。

4.6 选项卡标题样式

下划线样式选项卡的标题样式是通过CSS的 text-decoration 属性控制的。当鼠标悬停在选项卡标题上时，其 text-decoration 属性设置为 underline ，表示添加下划线；当鼠标离开选项卡标题时，其 text-decoration 属性设置为 none ，表示移除下划线。

4.7 选项卡内容切换代码

下划线样式选项卡的内容切换代码是通过jQuery的 click() 事件处理程序实现的。当用户点击选项卡标题时，jQuery会触发 click() 事件处理程序，然后执行 hide() 和 show() 方法来切换选项卡内容。

5. 垂直选项卡设计与实现

垂直选项卡与水平选项卡不同，它将选项卡标签放置在侧边，内容区域在右侧垂直排列。这种布局在空间受限的情况下非常有用，例如移动设备或窄屏显示器。

5.1 HTML结构

垂直选项卡的HTML结构与水平选项卡类似，但标签和内容区域的布局不同。

<div class="vertical-tabs">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="tab" href="#tab-1">选项卡 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#tab-2">选项卡 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="tab" href="#tab-3">选项卡 3</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab-1">内容 1</div>
    <div class="tab-pane" id="tab-2">内容 2</div>
    <div class="tab-pane" id="tab-3">内容 3</div>
  </div>
</div>

5.2 CSS样式

垂直选项卡的CSS样式也与水平选项卡类似，但标签和内容区域的布局不同。

.vertical-tabs {
  display: flex;
  flex-direction: column;
}

.nav-tabs {
  flex: 0 0 150px;
  border-right: 1px solid #ddd;
}

.nav-link {
  display: block;
  padding: 10px 15px;
  text-align: center;
}

.tab-content {
  flex: 1 1 auto;
  padding: 15px;
}

5.3 jQuery代码

垂直选项卡的jQuery代码与水平选项卡类似，但标签和内容区域的切换方式不同。

$(function() {
  $('.nav-tabs a').on('click', function(e) {
    e.preventDefault();
    $(this).tab('show');
  });
});

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

战神哥

关注

9
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫