突出显示活动选项卡 - CSS

2024-01-12

我有一个使用 CSS 的小型选项卡式导航设置。当鼠标悬停在选项卡上时,颜色会发生变化,很棒。但是,当我单击一个选项卡并导航到相应的页面时,我希望该选项卡(活动选项卡?)保持突出显示,指示当前页面。

我目前正在通过使用类 (.currenttab ) 然后在每个 HTML 文件中使用此类来执行此操作。我没有使用:

active

有没有办法让我使用 active,而不是在每个单独的 HTML 文件中使用类,或者我所做的是否正确?

先感谢您。


你正在做的事情是正确的。这:active http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes伪选择器意味着其他东西 - 激活控件的事件(即用户按下鼠标按钮和释放鼠标按钮之间的时间)。

使用类来表示所选项目是正确的方法。

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

突出显示活动选项卡 - CSS 的相关文章

  • 如何在非 CSS3 浏览器上制作圆角?

    我知道在这种情况下我必须使用图像 每个角一个 例如 如果我需要给定元素周围有一个 4px 的纯蓝色边框 边框半径为 8px 我相应地设计了四幅图像 左上角 png 右上角 png 左下角 png 右下角 png 如果可能的话 我应该如何实现
  • 鼠标悬停时放大图像而不使用 Jquery 推送其他图像?

    当您将鼠标悬停在图像缩略图上 例如 Google 图片正在使用的缩略图 时 我正在尝试创建图像放大效果 但是 我遇到了一个问题 即放大的图像根据放大的图像的位置不断将另一张图像推到另一个位置 这是我到目前为止所拥有的
  • 如何使用 JavaScript 检测 CSS 变量支持?

    最新版本的 Firefox 支持CSS 变量 http www w3 org TR css variables 但 Chrome IE 和许多其他浏览器没有 应该可以访问 DOM 节点或编写一个小方法来返回浏览器是否支持此功能 但我还没有找
  • 伪元素和 SELECT 标签

    是否select标签允许使用 after选择器是为了在之后创建一个伪元素吗 我在 Mac 上尝试过 Chrome Safari 和 Firefox 但似乎不起作用 这是我使用过的折衷方案 http jsfiddle net pht9d295
  • 自动调整Google网站嵌入代码的高度(html)

    我正在使用 Google 协作平台嵌入 HTML 代码 将代码粘贴到 从网络嵌入 窗口中 输出的长度是可变的 我希望有一种方法可以动态调整父级的高度iframeGoogle 协作平台用于托管我的 HTML 我知道我可以使用 Google 协
  • 如何仅在 css/html 中强制在单词之间换行?

    我只有一段普通的文本 p 标签内的 p div 标签 但只有 Firefox 可以正确显示 Firefox 打破了单词之间的界限 所有其他浏览器都会在单词中间断行 这使得阅读变得困难 这是我的意思的一个例子 火狐浏览器 工作中 This w
  • 有没有办法将变量从 javascript 导入到 sass 或反之亦然?

    我正在制作一个依赖于块概念的 CSS 网格系统 所以我有一个基本文件 例如 max columns 4 block width 220px block height 150px block margin 10px 它被 mixin 使用 m
  • html css 下拉菜单

    这是我第一次在 Stack Overflow 上发帖 我不熟悉论坛发帖规定 所以请让我知道我做错了什么 我在论坛中研究过这个问题 但我所遇到的一切都没有给我明确的答案 我试图从 新闻 元素创建一个下拉菜单 但在运行代码时我从未得到任何可见的
  • 当百分比填充定义元素高度时忽略 max-height

    The max height当内部填充大于最大高度值时 属性值似乎被忽略 例如 在元素上设置此类会导致最大高度被忽略 max height ignored height 0 or auto makes no difference max h
  • 即使在包裹后也具有等宽的弹性项目

    是否可以制作一个像这样的纯 CSS 解决方案 物品有一些min width 它们应该动态增长以填充所有容器宽度 然后换行到新行 列表中的所有项目都应具有相同的宽度 现在看起来是这样的 这就是我希望它看起来像的样子 我已经手动管理这些底部项目
  • CSS: *html #id_name

    我有这个代码 html alertBox height 100px modalContainer gt alertBox position fixed 这是由CSS支持的吗 我在其他网站上找到了这段代码 我忘记了链接 html alertB
  • 如何向 CSS 形状添加偏移轮廓?

    我在创建带有斜角边缘的块时遇到了一些问题 此外我需要一个斜角的边框并稍微偏离主块 问题是这个块可以根据屏幕响应 不知道具体的方法 希望大家帮忙 这就是我现在所做的 box display flex padding 20px height 2
  • 像在 tumblr 注册页面上那样鬼写

    有谁知道如何创建一个类似 tumblr 的字段 http www tumblr com http www tumblr com 这是一个 URL 字段 其中有一些褪色的文本 然后当您单击它并键入时 它会附加一些文本 tumblr com 您
  • 如何在 Bootstrap 3 的导航栏中添加带有图标的搜索框?

    我正在使用新的 Twitter Bootstrap 3 并尝试放置一个像这样的搜索框 如下 在顶部导航栏中 在 Bootstrap 2 中 可以这样完成
  • 水平滚动的表格上的“粘性”标题......完全不可能?

    经过过去几个小时的研究后 我开始认为这是不可能的 即使在最新的浏览器上也是如此 HTML table具有水平滚动的元素 带有 粘性 thead在顶部 作为垂直滚动的周围网页的一部分 这是我的尝试 a height 100px backgro
  • 使用 CSS 网格布局使网格项内的元素高度相等

    我在长度超过 4 的 div 中有一系列文章 没有任何舍入行标签 我需要将其表示为每行 3 篇文章 列 的表格 可能包含display grid 每篇文章都有页眉 章节和页脚 如何在每行文章内实现每个标题的等高 每个部分的等高以及与文章底部
  • 如何使用 CSS 媒体查询检测设备方向?

    在 JavaScript 中 可以使用以下方式检测方向模式 if window innerHeight gt window innerWidth portrait true else portrait false 但是 有没有一种方法可以仅
  • 内嵌显示定义术语和描述

    我正在为页面上的某些元素使用定义列表 并需要它们内联显示 例如 它们normally看起来像 我需要它们看起来像 注意多个 DD 我可以让它们在 moz 中使用 float 来正常工作 但无论我尝试什么 它们都无法在 IE 中工作 我通常会
  • 如何使整个跨度落入新行?

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a
  • 为什么使用 iPhone 或 iOS 设备在“iframe”中查看“position:fixed”时不起作用?

    我研究过 stackoverflow 似乎position fixed在 iOS 移动设备的 iframe 中 https stackoverflow com questions 15874910 position fixed and if

随机推荐

  • Django:如何从模板中获取块?

    假设我的模板中有类似的内容 block subject my subject endblock 我加载这个模板tmpl loader get template mytemplate html 如何提取 我的主题 当您的模板扩展基础时 卡米洛
  • 在 Java 中实例化通用对象

    是否可以像下面的代码片段那样在 Java 中实例化通用对象 我知道在 C 中这是可能的 但是 我在 Java 中还没有看到类似的机制 Let T be a generic type T t new T 不 由于类型擦除 这在 Java 中不
  • 嵌套文档中字段的 Mongoose 索引

    我有一个小架构 var PostSchema new mongoose Schema title String link String author type String required true upvotes type Number
  • React - 从孩子身上移除道具

    我需要从孩子身上取下一个道具 我有一个容器元素 它使用其子元素的属性来对子元素执行一些增强 在渲染之前应该从子级中删除该属性
  • 具有重复函数调用的列表理解[重复]

    这个问题在这里已经有答案了 我想转换一个字符串 如下所示 1 2 3 放入非空元素列表中 1 2 3 我的解决方案是这个列表理解 print el strip for el in mystring split if el strip 只是想
  • 打开输出流 #0.0 的编码器时出错 - 参数可能不正确,例如比特率、速率、宽度或高度

    我正在使用此命令通过 FFMPEG 将 avi mov m4v 视频文件转换为 flv 格式 usr local bin ffmpeg i home public html files video 1355440448 m4v s 640x
  • 在嵌套资源中自动添加父模型 ID

    Rails 3 中的嵌套资源路由如下 resources magazines do resources ads end 帮助者如magazine ad path被定义 我必须将杂志和广告都传递给它 如果我只有对广告的引用 这会很不方便 ma
  • 对 FAT32 中的文件进行排序,无需再次复制

    我编写了一个小程序 它使用比较器按照我想要的顺序复制 FAT32 驱动器上的文件 例如 按字母顺序或最小文件优先 感谢 Java 7 但如果我向 FAT32 驱动器添加新文件 所有文件都需要重新排序并复制 以确保顺序正确 有没有办法用jav
  • Google Chrome 扩展程序中每个选项卡的本地存储变量范围

    我想存储每个选项卡范围的变量 已经提出了同样的问题 建议是使用 localStorage 但是如何使用localStorage来保存关联数组呢 例如 用户正在登录站点 我想创建一个变量来引用该用户 这样用户将打开许多选项卡并登录许多站点 因
  • PHP SUM 函数

    我有一个如下表 id q id value 1 2 5 2 2 NULL 3 2 5 4 2 NULL 5 4 2 6 4 NULL 7 4 2 8 4 NULL 我想要的是获得 例如 所有值的总和where q id 2 sq mysql
  • 如何以编程方式将照片转换为类似宝丽来的照片?

    如何将现代照片转换为那些照片的外观和感觉宝丽莱照片 http www flickr com groups polaroid 欢迎参考和 或示例代码 谢谢 将图像转换为 HSV cv cvtColor 然后查看调整色调 饱和度值 see ht
  • 运行“react-native run-android”后打包器未启动

    我是 React Native 的新手 当我按照官方教程将我的应用程序部署到 Android 时 它显示一个红色屏幕 显示 无法连接到开发服务器 我正在物理设备上运行 所以我尝试了adb reverse tcp 8081 tcp 8081但
  • Delphi:如何在不使用断言的情况下获取(当前代码行,当前单元,当前函数)?

    我正在尝试在我的程序上创建一个日志系统 它将在文本文件上记录调试消息 并且我想保存代码中调用日志消息的确切位置 但我不想使用 Assert 函数 因为它会创建异常 这个系统不仅仅用于记录异常 我还必须编写一些调试信息 使用断言的示例 pro
  • 能否获取windows平台上每个进程的L2缓存未命中计数?

    我想计算每个进程的内存带宽 任何人都可以告诉我如何获得每个进程的二级缓存未命中 谢谢 回族 有一个截屏 http software intel com file 33638在此英特尔性能计数器监视器 http software intel
  • Visual C# 2010 的 SQLite 安装问题

    我正在尝试使用 SQLite 在 Visual C 2010 中创建数据库 但是当我选择 SQLite 数据库文件 时 我没有机会指向数据库文件 我收到一个对话框 要求我提供连接字符串 我无法提供一个不会给出错误 无法加载文件或程序集 Mi
  • 使用 Itextsharp 填写 PDF 表单

    我正在尝试使用 ITextsharp 填写表单 并尝试使用以下代码来获取 pdf 中的所有字段 string pdfTemplate c Temp questionnaire pdf PdfReader pdfReader new PdfR
  • vim 复制并替换文本

    可以说我有这样的文字 test lorem test2 ipsum 我想复制 lorem 并粘贴到 ipsum 中 我尝试做yi 在 lorem 上 然后在 ipsum 上做了ci 但这用 ipsum 取代了我的 Pastebin 我以前的
  • 绑定时,knockoutjs 选择更改事件被触发

    我有这个淘汰码 http jsfiddle net nickbuus Rwabt http jsfiddle net nickbuus Rwabt 问题是 每当下拉选择框被填满时 就会调用更改事件
  • 为什么这种类型的双关不是未定义的行为?

    这是一个我认为会调用未定义行为的玩具示例 include
  • 突出显示活动选项卡 - CSS

    我有一个使用 CSS 的小型选项卡式导航设置 当鼠标悬停在选项卡上时 颜色会发生变化 很棒 但是 当我单击一个选项卡并导航到相应的页面时 我希望该选项卡 活动选项卡 保持突出显示 指示当前页面 我目前正在通过使用类 currenttab 然