重磅升级！打造沉浸式交互体验，JS-小Demo Tab选项卡与返回顶部按钮详细教程

前端

2023-03-07 06:03:50

打造沉浸式网页交互的利器：探索 JS-小 Demo 中的 Tab 选项卡和返回顶部按钮

简介

提升网页交互体验是提高用户满意度和参与度的关键。JS-小 Demo 是一款强大的工具，可以帮助你轻松实现这一目标。本文将深入探讨 Tab 选项卡和返回顶部按钮这两个小工具，指导你打造更美观、更具互动性的网页。

Tab 选项卡：轻松切换，尽享精彩

Tab 选项卡允许用户在不同内容之间无缝切换，提供了一种井然有序的组织方式。

如何创建 Tab 选项卡：

准备内容： 将要展示的内容放入不同 <div> 元素中，并为每个元素设置唯一 ID。
创建选项卡： 使用 <ul> 和 <li> 元素创建选项卡，将 <li> 元素的 ID 与对应 <div> 的 ID 关联。
添加样式： 为选项卡设置美观样式，使用 CSS 的 :hover 伪类在鼠标悬停时改变样式。
添加脚本： 使用 JavaScript 监听选项卡点击事件，隐藏所有 <div>，并显示与所点击选项卡关联的 <div>。

示例代码：

<ul>
  <li id="tab1">选项卡 1</li>
  <li id="tab2">选项卡 2</li>
</ul>

<div id="content1">选项卡 1 内容</div>
<div id="content2" style="display: none;">选项卡 2 内容</div>

<script>
  document.getElementById("tab1").addEventListener("click", function() {
    document.getElementById("content1").style.display = "block";
    document.getElementById("content2").style.display = "none";
  });

  document.getElementById("tab2").addEventListener("click", function() {
    document.getElementById("content2").style.display = "block";
    document.getElementById("content1").style.display = "none";
  });
</script>

返回顶部按钮：一键返回，畅享便捷

返回顶部按钮允许用户快速回到网页顶部，简化导航。

如何创建返回顶部按钮：

准备视觉元素： 选择图片或图标作为按钮的视觉元素。
创建按钮： 使用 <a> 元素创建按钮，将 href 属性设置为指向网页顶部。在 <a> 元素中添加视觉元素。
添加样式： 为按钮设置样式，使用 CSS 的 fixed 属性将其固定在网页底部。
添加脚本： 使用 JavaScript 监听页面滚动事件，当页面滚动到一定距离时显示按钮。点击按钮将页面滚动到顶部。

示例代码：

<a id="back-to-top" href="#">
  <img src="back-to-top.png" alt="返回顶部">
</a>

<script>
  window.addEventListener("scroll", function() {
    if (window.pageYOffset > 100) {
      document.getElementById("back-to-top").style.display = "block";
    } else {
      document.getElementById("back-to-top").style.display = "none";
    }
  });

  document.getElementById("back-to-top").addEventListener("click", function() {
    window.scrollTo({ top: 0, behavior: "smooth" });
  });
</script>