使用 URL 打开 JQuery 选项卡,并在选项卡单击时向 URL 添加哈希值

2023-12-29

我正在开发一个 Web 应用程序,并且使用 JQuery UI Tabs 插件来分离数据。
如果我将鼠标悬停在每个选项卡上,我可以在屏幕左下角看到该选项卡的 URL(例如:testPage.com/#tab1 或 testPage.com/#tab2)

现在,如果我在 URL 栏中输入其中一个地址,我不会转到与 URL 中的哈希相关的选项卡,而是转到应用程序中的第一个选项卡。

我的问题是:如何将特定选项卡锚定到 URL?
因此,如果有人访问 testPage.com/#tab3,他们最终会出现在应用程序的选项卡 3 中。

我这样做也是因为我想使用 JQuery BBQ 插件来修改浏览器历史记录,这样我就可以让用户在点击后退按钮时转到他们所在的最后一个选项卡。

Example:
http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/ http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/


我最终使用了 Asual 的 JQuery Address 插件。我做了以下事情:

    // For forward and back
    $.address.change(function(event){
        $("#main_tabs").tabs( "select" , window.location.hash );
    });

    // when the tab is selected update the url with the hash
    $("#main_tabs").bind("tabsselect", function(event, ui) { 
        window.location.hash = ui.tab.hash;
    });

希望这对某人有帮助! 谢谢。

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

使用 URL 打开 JQuery 选项卡,并在选项卡单击时向 URL 添加哈希值 的相关文章

  • 隐藏行时更新奇数/偶数行颜色

    我在一页上有几个表格和一个复选框 用于根据其中一个单元格的内容显示 隐藏行 虽然所有行都是可见的 但一切都很完美 并且行颜色根据需要交替 当我隐藏行时 交替的行颜色不再正确 显然 如何轻松更新类以在选中复选框时保持交替行颜色 然后在取消选中
  • 将对象传递给jquery中的回调函数

    我最近正在开发小型聊天模块 该模块需要不断检查服务器是否有新消息 我正在向服务器发送 ajax 请求 服务器将保持连接 直到找到新消息 长轮询 Code var chatController function other variable
  • 无需源代码即可部署网站

    我用php开发了网站 我想在没有源代码的情况下部署它 用php可以吗 我可以将网站代码转换为某种中间形式然后进行部署吗 您可以使用 Zend Guard 来编码您的代码 这样它就无法被逆向工程 http www zend com en pr
  • JavaScript 附加和前置与 jQuery 附加和前置

    QA Style 我最近读了一篇文章 里面说JavaScript已经实现了append and prepend受 jQuery 启发的方法 这对我来说是一个新知识 因为据我所知 要附加一个元素 我必须使用element appendChil
  • 克隆 jQuery 样式?

    我有一个 span called spn1 它有一些来自内联 CSS 文件的样式 我还有一个 span called spn2 我怎样才能克隆spn1 s complete风格融入spn2 I want spn2看起来完全 风格 像spn1
  • Jquery 对话框部分视图服务器端验证“保存”按钮单击

    我有一个显示数据的表格 表格的每一行都有编辑按钮 单击编辑按钮时 将出现一个 jquery 对话框 其中包含用于编辑用户信息的表单以及保存和取消按钮 表单只不过是部分视图 按钮是部分视图的一部分
  • 如何获取元素相对于当前屏幕位置的偏移量?

    我正在尝试用纯 Javascript 重构所有 jQuery 除了非常具体的值之外 一切都正常工作 根据此代码的浏览器供应商 我得到了不同的值 对于 jQuery 我会使用 var topSelected figure offset top
  • 如何预览图片上传前后的效果?

    我打算在表单中预览图像或照片 但它不起作用 HTML 代码如下所示
  • 如何在全日历中显示从数据库中获取事件的时间

    你好朋友在我的应用程序中 我真的制作了一个弹出页面 它在数据库中插入事件 并从数据库中获取事件 但事件没有按时间显示数据 读取有一系列事件 其中包含 eventid eventtitle start end 和格式类似数组 id 10 ti
  • onchange 下拉列表

    我的问题是我所问问题的延续 请参阅链接 加载国家 州 城市 https stackoverflow com questions 2640001 load country state city 我已经展开以从数据库加载我的下拉列表 我只需要一
  • jQuery - 为 div 添加设置宽度?

    我需要将一定数量的像素添加到div使用 jQuery 是否有一个简单的命令 或者我需要编写一些代码来首先找到元素的宽度 然后添加设置的数量 或者第三种选择 mydiv css width 10
  • FullCalendar 重复事件创建重复项

    我正在为我的新网站实现一个日历 我从后端应用程序检索事件并使用 fullcalendar 在模式中显示结果 我还使用 fullcalendar 的重复功能 https fullcalendar io docs recurring event
  • blueimp jQuery-File-Upload - 如何提交不附加文件的表单?

    我找到了有关如何在提交文件上传表单时添加附加表单数据的解决方案 这个问题是如果没有要上传的文件 如何上传附加数据 我在任务管理应用程序中使用 blueimp jquery file upload 来拖放文件并将其附加到任务 该脚本已初始化并
  • 在 jQuery 中,如果我有一个开始类和结束类,我如何用 div 包装多个元素

    好的 这里有一些 html 我有一些开始和结束课程 但为此我只添加了每门课程 1 门 div span nbsp span div div span nbsp span div div class start lt start span n
  • jQuery 文件上传:是否可以使用提交按钮触发上传?

    我在用着jQuery 文件上传 https github com blueimp jQuery File Upload用于基于 AJAX 的上传 它总是在选择文件后开始上传 是否可以更改行为以使用 提交 按钮 我知道问题 35 https
  • 使用 jQuery 将所有带有类的对象加载到数组中

    我的页面上有一堆带有 testClass 类的 div 我想将它们加载到数组中 然后检查数组的大小 但它不起作用 myArray testClass alert myArray count 怎么了 你有 myArray testClass
  • 附加带有 div 值的输入文本字段

    我正在尝试附加一个输入文本字段及其值作为 div 的值 这是我到目前为止所想到的 this append
  • 如何在 jQuery 中使用特定值来定位特定属性? [复制]

    这个问题在这里已经有答案了 我试图解决的问题是 编写函数newMessage 该函数接收主题名称作为参数 函数应将 p 标签的背景颜色更改为红色 其中数据主题名称为 topicName 例如 如果 HTML 是 div p General
  • jquery中(“*”)有什么用

    我正在阅读 jQuery 我不知道为什么使用 请解释一下这有帮助 是jquery中的一个选择器 它可以无条件地选择所有内容 包括html head和body 这是一个解释其用法的示例 document ready function butt
  • Jquery 脚本可以在 JSfiddle 中运行,但不能在 html 页面上运行

    我创建了一个JSFiddle http jsfiddle net defjam64 w4sGZ 4 其按预期工作 Jquery script function icon hover gcp icon hover function gcp i

随机推荐

  • TensorFlow - Saver.restore 未恢复所有参数

    我训练了双向 LSTM 类型的 RNN 近 24 小时 由于误差波动 我决定在允许其继续训练之前减少学习量 由于模型在每个时期都使用 Saver save sess file 保存 因此我终止了训练 CTC 损失已最小化至大约 115 现在
  • 使用 gruntjs 组合并缩小所有 Bower 库

    有没有办法自动将所有 Bower 安装的库合并并缩小为 1 个文件 首先我尝试了最基本的方法 将所有 js所有子目录中的文件 uglify options compress true my target files vendor js bo
  • 如何禁用 libsvm (java) 中的控制台输出

    我正在使用 libsvmjava并且遇到了与描述类似的问题here https stackoverflow com questions 8302519 suppressing the output in libsvm python对于蟒蛇
  • 如何捕获java.sql.SQLIntegrityConstraintViolationException?

    我的应用程序使用 JPA JavaDB 当我尝试保留违反约束的对象时 我得到SQLIntegrityConstraintViolationException http docs oracle com javase 7 docs api ja
  • 为什么 Mongoose 不验证更新?

    我有这个代码 var ClientSchema new Schema name type String required true trim true var Client mongoose model Client ClientSchem
  • 导航控制器栏被切断

    如果通过选择隐藏状态栏status bar style hide during application launch我正在自定义导航栏 如下所示 UINavigationBar appearance setBackgroundImage U
  • 以日历日为单位分割间隔的持续时间

    我有以下数据集 显示一集的开始和结束 日期和时间 ep lt data frame start c 2009 07 13 23 45 00 2009 08 14 08 30 00 2009 09 16 15 30 00 end c 2009
  • “POSIX”是什么意思?

    什么是 POSIX 我已阅读维基百科文章 http en wikipedia org wiki POSIX每次遇到这个词我都会读它 事实是我从来没有真正理解它是什么 任何人都可以通过解释 POSIX 的需要 来向我解释一下吗 POSIX h
  • 尝试混合属于不同事务的对象

    pony orm core TransactionError An attempt to mix objects belonging to different transactions 我知道这个错误是描述性的 我只是不明白为什么会发生 我
  • HikariCP 连接过多

    我有一个Java Servlet 我想将连接池与jdbc 数据库 mysql 一起使用 所以这就是我正在做的 这个类是公共最终类DBConnector private static final HikariDataSource dataSo
  • 如何仅为一个 Razor 页面设置 `ValidationVisitor.MaxValidationDepth` = 1?

    我该如何改变ValidationVisitor MaxValidationDepth在本地为一个 Razor 页面阻止验证子对象 我不想在全球范围内改变它MvcOptions MaxValidationDepth就像文档中描述的那样 最大递
  • 如何在默认 Spring Data JPA 方法上添加 QueryHints?

    我可以将查询缓存与 Spring Data JPA 一起用于我的自定义查询方法 如下所示 public interface CountryRepository extends JpaRepository
  • Spring Singleton 范围与应用程序范围

    单例和应用程序弹簧范围有什么区别 我知道单例作用域为每个应用程序创建一个实例 并且应用程序作用域以相同的方式工作 那么主要区别是什么 我需要一个例子来展示其中的区别 要了解应用程序范围和单例范围之间的区别 您需要了解 ServletCont
  • Spring - 在浏览器中显示 PDF 文件而不是下载

    我正在尝试使用 spring 在浏览器中显示 pdf 我的问题是浏览器下载文件而不是显示它 这是我的代码 RequestMapping value getpdf1 method RequestMethod GET public Respon
  • 将自定义声明添加到 azure b2c 客户端凭据流

    我已将 b2c 配置为客户端凭据流的授权服务器 我想向令牌添加声明 以便我可以使用策略将其发送到 APIM 中的后端服务 但我找不到一种方法来将这个额外的声明添加到令牌中 以便我可以在 APIM 上使用它 注意 可以使用授权代码流 但使用客
  • JavaScript 函数声明和求值顺序

    为什么这些示例中的第一个不起作用 但所有其他示例都起作用 1 does not work function setTimeout someFunction1 10 var someFunction1 function alert here1
  • Linq - 一个列表与另一个列表中的项目除外

    我认为我的问题很简单 但我是 linq 的新手 所以我在这里遇到了困难 我的系统调用一个名为 serviceTOP 的服务 它返回一个列表itemTOP Id Name 这些 ItemsTOP 不在我的系统中 但用户可以选择将哪个 item
  • 如何设置 Bluez 5 在配对期间询问 PIN 码

    我使用 QDbus 实现了 org bluez Agent1 接口 我想设置一个固定引脚 我将提供给用户 以便验证所有配对请求 并在引脚错误时拒绝它们 代理功能应为 NoInputNoOutput 因为该项目将部署在没有键盘或显示器的 Ra
  • 使用 ruby​​ rough gem 访问 git 日志数据?

    对于 git 存储库中的给定文件 我想查找修改该文件的最后一次提交的 SHA 以及时间戳 在命令行中 该数据对于特定文件路径的 git log 是可见的 例如 git log n 1 path to file 使用 ruby 的 git g
  • 使用 URL 打开 JQuery 选项卡,并在选项卡单击时向 URL 添加哈希值

    我正在开发一个 Web 应用程序 并且使用 JQuery UI Tabs 插件来分离数据 如果我将鼠标悬停在每个选项卡上 我可以在屏幕左下角看到该选项卡的 URL 例如 testPage com tab1 或 testPage com ta