显示部分/div 取决于链接中的哈希值 # 后

2024-04-29

我有以下页面

section {
 height: 1000px;
 background: yellow;
 margin: 50px;
}
<section id="one">Section one</section>
<section id="two">Section two</section>

如果用户来自包含散列后的部分 id 的链接,则可以使用 html/css 仅显示一个部分,例如

  • 如果用户转到链接http://my-site/page#one http://my-site/page#one他应该只看到第一部分
  • 如果用户转到链接http://my-site/page#two http://my-site/page#two他应该只看到第二部分
  • 如果用户转到链接http://我的网站/页面 http://my-site/page他应该看到所有部分

?


您可以调查使用:target https://developer.mozilla.org/en-US/docs/Web/CSS/:target伪类,但当 URL 哈希为空时,您可能很难显示所有部分。

例如:

section:not(:target) { display:none; }
section:target { display: block }
<a href="#one">One</a>
<a href="#two">Two</a>

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

显示部分/div 取决于链接中的哈希值 # 后 的相关文章

  • 使用 GD lib 过滤器标准化 CSS 过滤器

    我想让用户拖动范围滑块并通过实时预览 CSS 滤镜 调整图像的亮度和对比度 然后使用 GD 库保存调整 但是 我似乎无法从 CSS 过滤器和 GD lib 亮度和对比度过滤器获得相同的结果 我的 CSS 过滤器范围为 50 150 其中 1
  • CSS Font-Face url 不起作用?

    我在使用 font face 选择器时遇到了一些问题 我有以下问题 font face font family MuseoSans 700 src url http mysite co uk clients reload Images st
  • iPad Safari 100% 高度问题

    我的页面上有一个模态 div 它使背景变灰 如果我将overlay div的高度设置为100 它在IE 桌面 上工作正常 但在iPad Safari上 完整的高度不会变灰 究竟是什么问题 这与固定位置 视口有关吗 请帮忙 下面是相同的 CS
  • 使 css nth-child() 只影响可见

    有没有办法用这个CSS只影响可见元素 table grid tr alt nth child odd background ebeff4 table grid tr alt nth child even background ffffff
  • 是否可以将整个“卡片”包装在 标记中?

    在我的网站中 我有 卡片 每张卡片都包含许多元素 图像 文本 日期等 这有点像 Twitter 中的推文卡 我希望整个卡片都是可点击的 应该是到另一个页面的链接 目前 我有顶级元素作为 a 标记和使用aria label and aria
  • 有没有办法根据渲染的字符串创建 DOM 对象?

    有没有办法从整个字符串而不只是innerHTML 创建DOM 对象 我有一个完整呈现的 DOM 形式的字符串
  • 下拉 24 小时选项值和 12 小时显示

    我需要创建一个时间数组 以便在 HTML 下拉列表中使用 数组键应采用 24 小时格式 值应采用 12 小时制 包含 am 和 pm 在数据库中我想存储 24 小时格式 有没有一种快速的方法来创建数组而不是每小时键入 example 00
  • 如何使用 jQuery 在按下按钮后保持按钮处于活动状态

    我见过一些非常相似的问题 但一直无法找到我正在寻找的答案 我已经确定了解决方法 但想知道执行该任务的正确方法 我想要的是单击按钮并使活动状态保持不变 下一次单击将切换状态 这是所需的 我真正需要知道的是如何解决 uiButton activ
  • 如何在 Mac 的任何 webkit 中隐藏父圆角的画布内容?

    我有一个父母div带有圆角 其中包含canvas div div
  • IE10中的图像插值

    这是我的用例 我有一个采用响应式设计的网页 该页面垂直分成两半 我想在右侧显示图像 呈现为 PNG 或 JPG 的 PDF 页面 调整窗口大小后 图像的大小应立即更改 我以为我已经解决了这个问题 我将服务器上的图像渲染得足够大 以适应最大可
  • 如何翻转 Twitter Bootstrap 的工具提示

    我正在使用 Twitter 的 Bootstrap 来实现工具提示 目前 工具提示显示在链接上方 我希望工具提示出现在链接下方 我该怎么做呢 我正在触发工具提示 它明确指出 底部 但它不想为我工作 tooltip tooltip place
  • jQuery 选择器定位具有 id AND class 的元素不起作用

    我有以下事件处理函数 jQuery document on click button submitb function e alert jQuery 包含在 html 文档中 但是 如果我点击 div class submitb Go di
  • Firefox CSS 大纲错误?

    在 Chrome 和 IE9 上 我指定的 CSS 轮廓完全符合我的要求 并充当我正在设计的元素周围的第二个边框 但在 Firefox 上 轮廓会向外扩展 以便包含我生成的 after 伪元素以及主元素 这是一个错误 还是预期的 有什么好的
  • 如何使用CSS将文本放在“框”的右上角或右下角

    我怎样才能得到here and and here位于右侧 与 lorem ipsums 位于同一行 请参阅以下内容 Lorem Ipsum etc here blah blah blah blah lorem ipsums and here
  • 加载背景图像的图像不显示

    我真的很困惑 我正在尝试创建一个带有图标和一些按钮的登陆页面 但我无法设法使我正在使用的背景图像显示出来 即使它是根据 Chrome 的开发工具包加载的 我只有这些行 索引 html div class row div class tryh
  • Onblur 事件在另一个 div 的 onclick 之前触发

    如上所述 我有一个按钮 单击该按钮将打开子菜单 对于子菜单中的每个选项 都有三个元素 我认为实际上还有更多元素 但为了简单起见 将其保留为 3 我将焦点放在子菜单的主 div 白色 框架 上 Onblur 这个 div 然后我隐藏子菜单 这
  • 如何动态隐藏和显示html元素

    html 输入元素使用链接标记隐藏和显示 示例 雅虎邮件密件抄送隐藏和显示 这是用 JavaScript 完成的 对于简单的 Javascript 即不使用jQuery你可以这样做 document getElementById idOfE
  • 媒体查询:如何定位桌面、平板电脑和移动设备?

    我一直在对媒体查询进行一些研究 但我仍然不太明白如何定位特定大小的设备 我希望能够针对台式机 平板电脑和移动设备 我知道会存在一些差异 但如果有一个可用于针对这些设备的通用系统 那就太好了 我发现的一些例子 Mobile only scre
  • 在桌面和移动设备上编写 2 列和 3 列的 Flexbox 代码(换行)

    我真的很难弄清楚这个 CSS flexbox 解决方案 基本上有两个问题 一个是 2 列布局 另一个是 3 列布局 2 列 我认为这可能非常简单 3 列 这可能更高级一些 容器类是 嗯 container 而孩子们只是 left right
  • 带缩略图的轮播和 bootstrap v4

    我看到了带有缩略图的轮播演示bootstrap 3 here http jsfiddle net talmand JS6JV 我正在尝试为 bootstrap v4 实现相同的功能 但无法弄清楚如何修复一些 UI 细节 例如左 右阴影覆盖整

随机推荐

  • 是否可以使用 ES6/Babel 进行多个类导入?

    我正在开发一个反应项目 我的第一个项目 最近我重组了我的文件夹结构以使其更有意义 为了让我的生活更轻松 在我的组件文件夹中 我有一个index js文件如下所示 export from App export from Home export
  • 如何使用 compose 将 docker 卷安装到我的 docker 项目中?

    我有一个 Maven 项目 我正在 Docker 内运行 Maven 构建 但问题是 每次运行它时 它都会下载所有 Maven 依赖项 并且不会缓存任何 Maven 下载 我找到了一些解决方法 将本地 m2 文件夹挂载到 Docker 容器
  • 如何在输入数字时在数字输入字段中添加破折号?

    我正在尝试使用 javascript 将破折号插入到 html 数字字段中4th输入时输入数字 我在模糊中执行此操作 而不是在按键 按键上等中执行此操作 但是当我尝试将功能更改为on key press on key up事件它没有给出预期
  • 将耗时的进程从我的 ASP.NET 应用程序中移走

    我的 Asp net 应用程序生成动态 pdf 有时这需要一段时间 并且是一个相当繁重的过程 实际上我不希望我的用户等待pdf 只需在生成后将其发送到那里的邮件即可 所以我尝试了网络服务 我将一个 id 从数据库获取数据 和一些字符串传递给
  • AngularJS:使用控制器和 ng-repeat 重新加载 div 上的数据

    我是 Angular JS 的新手 正在学习它 我有一个 div 并在启动时使用控制器从 json 加载数据 代码如下 但我想在执行特定操作后 json 对象发生更改时再次重新加载它 索引 html DOCTYPE html PUBLIC
  • Angular:core.module 风格发生了什么?

    Tl dr 看来是core module风格不再是官方的一部分角度风格指南 https angular io guide styleguide 但它一定是最近才被删除的 导入单例服务的新最佳实践是什么 为什么删除了该样式 我刚刚读过this
  • 使 JavaScript 画布矩形可点击

    我正在创建一个简单的计算器 Here http startupsandfinance com online calculator html这是 我几乎完成了基本设计 但我对如何使按钮可点击感到困惑 一个技巧可能是为每个按钮创建一个 div
  • 如何计算给定坐标处相机可见矩形的大小? [复制]

    这个问题在这里已经有答案了 我制作了一个小型的 Three js 应用程序 它将一堆圆圈从画布的底部移动到顶部 let renderer scene light circles camera initialize animate funct
  • 是否可以要求您的用户清除您网站的 HTTP 严格传输安全 (HSTS)?

    如果您为具有较长生命周期的网站打开 HSTS 但后来决定将其关闭 例如由于第三方软件的问题 是否可以警告用户清除其 HSTS 缓存 要关闭服务器的 HSTS 请发送以下标头 Strict Transport Security max age
  • 如何修复缺少结束标签的 xml 文件

    我有一个如下所示的 xml 文件 它缺少结束标签 这是一个大约 10000 行的巨大文件 我该如何解决
  • 处理网络断开

    我正在尝试使用 HttpWebRequest 对象进行 长轮询 在我的 C 应用程序中 我使用 HttpWebRequest 发出 HTTP GET 请求 然后 我使用 beginGetResponse 等待响应 我正在使用 ThreadP
  • 转换为“const Y”不适用于 clang 上的“R&&”

    以下代码可以正常编译g GCC 4 7 1 20120721 但 最近构建失败clang version 3 2 trunk struct Y struct X operator const Y const return Y void f
  • 将数组转换为 Json [重复]

    这个问题在这里已经有答案了 可能的重复 在 jQuery 中序列化为 JSON https stackoverflow com questions 191881 serializing to json in jquery 将对象转换为 JS
  • 是否可以重载 *static_cast* 运算符?

    我定义了一个类A 实际属性无关 是否可以定义一个专业化static cast
  • 如何获取Access数据库中已更改的记录详细信息

    我有一个 Access 数据库 其中有许多表和数千条记录 如果有人更改其中的任何数据 任何行 甚至只是一个单元格 有什么方法可以知道哪些特定行或单元格已更改Access 数据库 任何属性或者我应该使用任何触发器吗 几年前我在使用 MSSQL
  • 在ListView.builder() flutter中动态创建单选按钮Group

    我想创建一个这样的用户界面 最后 我得到了所有选定单选按钮的详细信息 这是我的完整代码 当我尝试这样做时 所有单选按钮都转向一侧 import package flutter cupertino dart import package fl
  • 如何在mySQL数据库中安全地插入代码

    我正在构建一个网站 用户可以使用 PHP 和 mySQL 数据库来存储代码片段 但我不知道如何安全地将用户输入的代码插入我的数据库 我无法使用我通常使用的 安全 功能来转换输入 trim stripslashes等 因为重点是您可以将代码视
  • Reactjs:追加而不是用渲染方法替换

    我是 ReactJs 的新手 我脑子里有很多问题 例如我想追加而不是用 render 方法替换 Can I 安全简单做这个 创建一个临时 div var temp document createElement div ReactDOM re
  • 用于计算井字游戏独特状态的高效算法

    我正在尝试构建一个井字游戏来演示和实验机器学习算法 并且我发现了一个有趣的问题 例如 井字棋板可以是mirrored 但出于机器学习的目的 这两种状态是等效的 x o o x o o x x o o 同样地旋转 x o x o o o x
  • 显示部分/div 取决于链接中的哈希值 # 后

    我有以下页面 section height 1000px background yellow margin 50px section Section one section section Section two section 如果用户来