如何创建一个可以切换tab内容的表格?

2023-11-27

I want to make a table looks like this: enter image description here

内部表格不是问题,但不知道如何创建外部框架,其中包括“商品描述”、“运输”和“退货”选项卡。一个最小的例子将不胜感激。谢谢。


你当然可以使用 jQuery 来解决这个问题。当我需要一些选项卡时,我就是这样做的。我做了类似的事情:

<ul>
   <li><a href="#tab-description">Description</a></li>
   <li><a href="#tab-shipping">Shipping</a></li>
   <li><a href="#tab-returns">Returns</a></li>
</ul>
<div id="tab-description" class="mytabs">
</div>
<div id="tab-shipping" class="mytabs">
</div>
<div id="tab-returns" class="mytabs">
</div>

然后用一些 jQuery 来制作选项卡:

<script language="javascript" type="text/javascript">
   $(document).ready(function () {
      $("#mytabs").tabs({ fx: {opacity: 'toggle'} });
   });
</script>

对我来说效果很好。只需在每个 div 中填写您的内容即可。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何创建一个可以切换tab内容的表格? 的相关文章

  • 错误:使用本地文件时,summernote 不是一个函数

    我遇到了一个非常奇怪的问题 当我使用本地的 Summernote 文件加载文本编辑器时 发生了 summernote 不是函数 的情况 但是 如果我使用 cdn 文件加载编辑器 一切都会顺利 这是我的 HTML 标头代码
  • 从谷歌加载 jquery 不起作用(对我来说)

    啊 我是个可怜的菜鸟 下面的 html 文档没有提醒任何人我的求助 有人知道为什么吗 这对我有用
  • 制作一个透明的圆形按钮,带有不透明边框和文本/字体很棒的图标

    基本上我想要一个性感的 反应灵敏的圆形按钮 它是透明的 这样你就可以通过它看到背景 但有一个不透明的轮廓 这样你就可以看到按钮和不透明的文本 或者也许我会在稍后阶段添加一个字体很棒的图标 这是我的 JS 小提琴 这样你就可以看到我正在尝试做
  • 具有 dropdown-menu-right 类的下拉菜单未向右对齐

    我有以下导航栏结构 current user username 来自我的模板系统 ul class navbar nav mr auto mt 2 mt lg 0 ul div class dropdown show a class dro
  • 客户端与服务器端图像压缩[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在研究用户可以上传图片的东西 图像大小不受限制 现在我有两个选择使用PHP 服务器端 压缩图像或使用
  • 父元素的 mousedown 事件中的 offsetX 和 offsetY 错误

    我在 mousedown 上获取 offsetX 时遇到问题 下面是我的代码 div Click the text The mouseDown function is triggered when the mouse button is p
  • 如何使h1标签以其实际宽度居中

    我需要使 h1 标签居中 还需要在其周围制作边框 为了防止占用更多宽度 我给出display inline block但标签没有响应text align center then h1 text align center border 1px
  • 如何在CSS中嵌套多个计数器?

    我想用 CSS 嵌套两个不同的编号 以获得如下所示的自动编号 1 第 1 节 1 1 小节1 1 2 小节1 2 第 2 节 2 1 小节2 2 2 小节2 这是我实现这一目标的尝试
  • 如何在标签中制作文字自动换行

    我想在其中添加文字 a 标签适合固定的 div 但它会破坏 div 并且显示得很丑 CSS3 有一个属性 word wrap break word 看看MDN 自动换行文档 https developer mozilla org en CS
  • 将外部脚本嵌入 Next.js 应用程序

    我一直在尝试将外部 JavaScript 源嵌入到我的 Next js 应用程序中 但不断收到以下错误 无法对 文档 执行 写入 无法写入 从异步加载的外部脚本写入文档 除非 它是明确打开的 可以找到我尝试使用的代码here https w
  • 文本区域值高度[重复]

    这个问题在这里已经有答案了 我有一个 textarea 其 css 高度设置为 85px 用户可能会在该文本区域内键入内容行 我想知道文本 值的高度 而不是文本区域本身 有没有办法检查内部文本的高度 包括换行符 我会将文本区域的内容复制到另
  • FPDF - 内嵌粗体文本

    我正在尝试从 PHP 创建 PDF 出于法律原因 我们需要将免责声明的一部分设为粗体 并且需要概述免责声明 我当前的代码使用 if isset POST optout POST optout yes pdf gt Ln 5 pdf gt S
  • 在占位符中添加 HTML

    我喜欢使用 HTML 占位符 因为它有助于向用户描述他们需要输入的内容类型 但是 有时您需要为用户提供更多信息 而不仅仅是简单的句子 基本上我希望能够在我的文本区域占位符中添加换行符 制表符等 我听说过使用特殊编码来做到这一点 并且已经使用
  • 从提交的表单中转义字符串中的字符

    每次发布帖子时 我都会得到转义字符 gt gt gt 我有一个多步骤表单 它将数据从一种表单传输到另一种表单 我将这些值与准备好的语句一起保存在数据库中 数据库中的值当前看起来像Paul s House 用户应该可以在字符串中使用单引号和双
  • 在java中将DataURL图像转换为图像文件

    我在我的 java servlet 中接收图像 DataURL 它看起来像 data image jpeg base64 9j 4AAQSkZJRgABAQAAAQABAA 我需要将其另存为图像文件 我该怎么做 The simplest w
  • 将压缩的json数据存储在本地存储中

    我想将 JSON 数据存储在本地存储中 有时存储的数据可能超过 5MB 每个域的浏览器允许的最大阈值 无论如何 我可以压缩或压缩数据并将其存储在本地存储中吗 如果对大数据进行每个 JS 函数的压缩和解压 会增加多少延迟 我正在使用这个 js
  • 如何创建环境变量来保护我的网站的 Google 地图 API 密钥(或任何其他秘密值)?

    我正在学习使用 Bootstrap 编写自己的网站 并使用 Google 地图 API 密钥和 Google Developers 的脚本轻松地将地图放置在我的页面上 理想情况下 我会有类似的东西 即我已经尝试过这个 Html PHP
  • 创建响应式眼睛焦点图标

    我一直在尝试制作响应式彩色眼睛焦点图标 但到目前为止我所尝试的一切均不成功 我试图在某种程度上复制真眼的颜色 我使用边框 框阴影来获取颜色 但该部分没有缩放 也尝试过轮廓 但也失败了 那个甚至不是圆的 div 的高度当前是静态的 但我希望它
  • HTML 布局:向现有网站添加侧边栏

    我有一个网站 其正文如下所示 div div div div div div 这些中没有使用绝对 相对定位技巧divs 但是有很多floats clears margins and padding这些风格divs 及其内部元素 所有这些都会
  • HTML标题属性样式[重复]

    这个问题在这里已经有答案了 如何在不使用 javascript 或 CSS 的情况下更改以下标记中标题属性的样式 因为我将 HTML 插入到原本无法编辑的文档中的特定位置 span title This is information Thi

随机推荐

  • SQL try-catch 语句不处理错误 (SQL Server 2008)

    我正在尝试使用 try catch 捕获 SQL 查询 而不是存储过程 中的错误 由于某种原因 这没有处理我的错误 但我仍然得到 消息 213 第 16 级 状态 1 第 29 行 列名称或提供的值的数量与表定义不匹配 有什么帮助吗 beg
  • 捕获最小化远程桌面的屏幕截图

    我有以下 C 代码 用于捕获远程桌面 RDP 会话内的屏幕截图 当会话处于活动状态时 它工作正常 但如果我最小化会话 则会因无效句柄异常而失败 有什么方法可以实现此功能 或者当会话最小化时屏幕基本上 消失 了 string filename
  • strtotime('上个月的第一天') 的版本差异?

    在包含以下内容的脚本中 date Y m d strtotime first day of last month 在版本 5 3 10 localhost 中 我得到 例如 2012 03 01 在版本 5 2 17 远程主机 中 我得到
  • 如何自动停止VBA宏?

    I know you can manually stop a running VBA macro with Ctrl Break but is there any way to have the code stop automaticall
  • 安装 HAXM 时不支持 VT

    我正在尝试安装使用 Intel x86 模拟器加速器的快速 Android 模拟器 我已经通过 SDK 管理器下载了加速器 但是当我尝试安装它时 我在安装开始时收到以下错误消息 我知道我的 CPU i7 3520M 支持 VT X 虚拟化
  • macOS 上 SwiftUI 中列表内的 TextField:编辑效果不佳

    这个问题是关于 SwiftUI 的macOS应用程序 不是 iOS 或 Catalyst 使用 Xcode 12 4 SwiftUI 2 问题是 编辑列表内的文本字段效果不佳 事实上 它的效果非常差 以至于一开始我以为我根本无法编辑它 这是
  • sqlite3“操作错误:接近”(“:语法错误”python

    简而言之 我正在尝试创建一个 sql 数据库表并向其中输入数据 我让它以更简单的方式工作 但是当我将它放入我的脚本中时 它会导致此错误 我希望这是我错过的一些简单的事情 任何帮助 建议将不胜感激 conn sqlite3 connect D
  • Angularjs - 装饰控制器

    我正在尝试为我的控制器设置一个装饰器 我的目的是在我的应用程序中的所有控制器中引入一些常见的行为 我已将其配置为在 Angular 1 2 x 中工作 但从 1 3 x 开始有一些重大更改破坏了代码 现在得到的错误是 控制器不是一个函数 下
  • 类型参数“T”不受 impl 特征、自身类型或谓词的约束

    当特征具有相关类型时 我很难理解特征的使用 这是一个非常简单的例子 pub trait Message pub trait SendsMessages type Message Message fn send msg Self Messag
  • 如何在 Moose 中使用单个构建器构建多个属性?

    使用 Moose 是否可以创建一个同时构建多个属性的构建器 我有一个项目 其中对象有多个字段 集 如果请求该集中的任何成员 我想继续填充它们 我的假设是 如果我需要姓名 我还需要生日 并且由于它们位于同一个表中 因此在一个查询中获取两者会更
  • 基类指针可以指向派生类对象。为什么反之则不然呢?

    基类指针可以指向派生类对象 为什么不进行强制转换则反之亦然 从逻辑上讲 基类不会有足够的派生类信息 但派生类也应该有基类的信息 我在这里缺少一些基础知识 如果我告诉你我有一只狗 你就可以放心地假设我有一只宠物 如果我告诉你我有一只宠物 你不
  • Sql批量插入--文件不存在

    我有以下查询要插入表中 BULK INSERT tblMain FROM c Type txt WITH FIELDTERMINATOR ROWTERMINATOR n GO 它收到消息 消息 4860 16 级 状态 1 第 1 行无法批
  • 在运行时动态选择要使用的 .dll 版本

    我正在开发一个 SharePoint 实用程序 该应用程序适用于 SharePoint 2007 和 2010 当我引用 12 0 0 0 版本的 SharePoint dll 时 该应用程序适用于 SharePoint 2007 但不适用
  • TFS 2012 + Visual studio 2012:某些设置选项返回“用户名或密码不正确”

    我已将 TFS 2010 升级到 TFS 2012 没有出现任何问题 我可以连接到源代码管理 签入以及工作所需的一切 但是 如果我转到我所连接的团队项目的设置页面 则会出现以下选项work正如预期 团队项目 源代码控制 团队项目 门 户设置
  • 如何从列表中删除元素?

    我有一个列表 我想从中删除一个元素 我怎样才能做到这一点 我尝试在参考手册中查找我认为该函数的明显名称 但没有找到合适的名称 Answer recommended by R Language Collective 如果您不想就地修改列表 例
  • 使用 Chromedriver 制作程序,出现错误:“无法使用此命令获取 Chrome 版本”

    这是我的代码 我这样做是因为当我尝试输入 chromedriver exe 的路径时 我要么收到 WebDriverException 消息 chromedriver exe 可执行文件可能有错误的权限 或 WebDriverExcepti
  • MVVM Light Toolkit - Messenger 使用事件聚合器还是中介器模式?

    有人可以帮我看看是否I Messenger 类 和实现 from MVVM轻工具包演示了使用事件聚合器模式 or 中介者模式 如果有人建议它部分遵循这两种模式 那么我会请求详细信息 说明实现的哪一部分类似于哪种模式以保持答案有效 Ref O
  • RoR - 选择禁用 include_blank 的标签

    我想要这样的结果
  • 从 fstream 读取单个字符?

    我正在尝试从 stdio 迁移到 iostream 事实证明这非常困难 我已经掌握了加载文件和关闭文件的基础知识 但我真的不知道流是什么 或者它们如何工作 与此相比 在工作室中一切都相对简单和直接 我需要做的是 从文本文件中读取单个字符 根
  • 如何创建一个可以切换tab内容的表格?

    I want to make a table looks like this 内部表格不是问题 但不知道如何创建外部框架 其中包括 商品描述 运输 和 退货 选项卡 一个最小的例子将不胜感激 谢谢 你当然可以使用 jQuery 来解决这个问