jQuery UI 选项卡 - 深度链接到选项卡内容

2024-01-05

我不确定目前这是否可能,而且我所做的测试似乎提供了奇怪的结果。

我在一页上有 4 个选项卡,这些选项卡内有几个文本部分,每个部分都有一个唯一的锚点名称。

我想做的是从另一个页面链接到选项卡 3 中的第四个内容块...

这些选项卡都工作得很好,如果我链接到第一个选项卡上的内容部分,它会很好用。当我想链接到不是第一个选项卡的选项卡时,它会变得很棘手。

我努力了

<a href="http://example.com#tab-3#content-4" ></a>

但这根本不起作用

当我只使用

<a href="http://example.com#tab-3"></a>

我也看到了这个正在实现 - 但是它似乎具有与使用上面的代码相同的功能,无论这是否在我的 jquery 调用中

$(function(){
  $('tabs').tabs();
  var hash = location.hash;
  $('tabs').tabs( "select" , hash );
});

使用上述两个选项之一,当选择第三个选项卡时,我会被一直推到页面底部。我认为这是因为所有选项卡都放置在列表项中,然后 jqueryui 将它们转换为选项卡.. 实际上将数字 3 的选项卡内容从底部移回选项卡部分的顶部..

如果有人知道我如何链接到第三个选项卡上的第四个内容块,我将非常感激。

有人的解决方案可能在于 $_post 和 $_get data.. 但我不确定是否真的如此,即使这样我也不知道如何用 jqueryui 实现它

先感谢您


尝试这个:

作为链接使用

<a href="http://example.com#content-4" ></a>

还有剧本

    $(function(){
        $tabs = $('#tabs').tabs();

        var hash = location.hash.substring(1),

        $anchor = $tabs
            .find('a[name="' + hash + '"]'),

        tabId = $anchor.closest('.ui-tabs-panel')
            .attr('id');

        $tabs.find('ul:first a').each(
            function(i){
                    if($(this).attr('href') === '#' + tabId){
                        $tabs.tabs('select', i);
                        window.scrollTo(0, $anchor.position().top);
                        // Stop searching if we found it
                        return false;
                    }
            }
        );
    });
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery UI 选项卡 - 深度链接到选项卡内容 的相关文章

  • PhoneGap/Cordova:如何使用cookies(iOS)?

    我有一个适用于 iOS 的 PhoneGap Corodova 项目 在 iOS 模拟器上构建时 我使用了 Jquery Cookies 它们很好 但是 既然我的设备上有该应用程序用于测试 它们就不再工作了 我猜这只是 iOS 不支持的东西
  • 使用 parsley.js 支持每个字段多个自定义错误消息

    我正在尝试使用 parsley js 验证一个简单的表单 并且我对 parsley js 非常初学者 我想使用 window ParsleyValidator addValidator 方法在一个自定义验证方法中显示多个错误消息 所以我尝试
  • 使用 jQuery UI 日期选择器选择日历更改 URL

    我正在使用 jQuery UI 选择器 我想知道当有人选择日期时是否有可能 它会自动将他们重定向到 URL 如下所示 index php date 2013 10 15 这是我正在使用的插件 Date
  • 在 ASP.NET MVC 4 中使用 jQuery Mobile 1.3 面板时的双滚动条

    我无法弄清楚这一点 将以下代码放入布局页面并在浏览器中查看后 我将显示 2 个垂直滚动条 div div 遇到了类似的问题 并注意到只有在使用我的自定义主题时才出现这种问题 我以错误的顺序将自定义主题添加到页面 这导致了问题 正确的顺序是
  • 如何使用JQuery和Django(ajax + HttpResponse)?

    假设我有一个 AJAX 函数 function callpage ajax method get url abc data x 3 beforeSend function success function html IF HTTPRESPO
  • 限制 jQuery id 字符串吗?

    简而言之 我的问题是字符串在 jQuery 中作为可搜索 id 或可搜索内容有什么限制 更新 我得到了 ID 部分 但不是为什么我什至无法使用该字符串搜索 html 内容 对于任何愿意告诉我一个正则表达式来将模式从 MM dd yy HH
  • 将 jQuery 版本从 1.7.1 升级到 1.11.2

    在我当前的应用程序中 我使用的是 jQuery 版本 1 7 1 现在 我计划将jQuery版本升级到1 11 2 是否有任何补丁可以提供与现有应用程序的向后可比性 Thanks 尝试这个 http blog jquery com 2013
  • 检测 WebGL 支持的正确方法?

    我正在尝试跨多个浏览器检测 WebGL 支持 并且遇到了以下情况 当前版本的 Firefox 似乎使用以下检查来报告积极支持 即使访问者的视频卡被列入黑名单和 或 WebGL 被禁用 if window WebGLRenderingCont
  • JSON 数据中的 jQGrid celledit 显示 URL 未设置警报

    我需要从服务器加载 JSON 并且希望用户能够单击并编辑该值 但是当他们编辑时 它不应该调用服务器 我的意思是我不会立即更新 所以我不想编辑网址 所以我尝试了 ClientArray 但它仍然显示 Url is not set 警报框 但是
  • CORS 在 jquery 中工作正常,但在 angularjs 中不行

    我的服务器端是php mysql 我正在另一个域的 Web 服务中进行 Ajax 调用 其中启用了 的访问控制 var postUrl http logical brains com elance clone test login php
  • jqGrid - 使所有列不可排序?

    除了添加之外 有没有办法使网格上的所有列都不可排序sortable false到每一列 我知道您可以在网格级别设置全局选项 但不知道是否可以在 colModel 级别执行此操作 您可以使用 colmodel 模板来实现此目的 cmTempl
  • defaultDate 选项与 setDate 方法之间的差异

    我正在尝试使用jQueryUI DatePicker 我必须了解的主要事情之一是在页面加载时设置日期的方式 经过一些研究后 我发现有两种不同的方法可以做到这一点 using defaultDate option using setDate
  • 使用 AJAX 加载部分视图不起作用

    请原谅我 我是 MVC 和 AJAX 的新手 目前我只是提交一个表单 我想使用表单中的数据使用 ajax 更新部分视图中的表 My UserInfo部分视图如下所示 model IEnumerable
  • 简单的 jQuery(scrollTo 和 animate)在 IE 中不起作用

    我刚刚注意到一些简单的 jQuery 无法在移动版 IE9 和 IE10 上运行 我有一些版权链接和简单的滑动接触形式 它使用animate 我还结合使用scrollTo 插件和jQuery 我尝试了不同的版本 仍然没有解决 也许我错过了一
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • onclick 事件中未调用函数

    我想在每个 YouTube 链接的末尾添加一些 HTML 以在 litebox 中打开播放器 到目前为止 这是我的代码 document ready function var valid url new RegExp youtube com
  • 使用单击事件调用“trigger”方法时的复选框值

    如何在点击事件中获取正确的当前值以通过触发器调用 Html
  • 覆盖 jQuery 验证 MVC4 中的默认设置

    要覆盖查询验证插件 请在文件 http docs jquery com Plugins Validation validate toptions 推荐的方式是 selector validate invalidHandler functio
  • 将数组从 jquery ajax 传递到代码后面

    我必须将二维数组传递给在asp net网页代码后面编写的页面方法我有一个变量objList作为二维数组 我使用以下代码来实现此目的 但没有成功 并且未调用页面方法 脚本语言 function BindTable objList ajax u
  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容

随机推荐

  • 结合 Knockout.js + KendoUI - 您的经验是什么?

    所以我看到 KendoUI 包含了与 Knockout js 集成的示例 http demos kendoui c om web integration index html http demos kendoui com web integ
  • 当用户选择不购买iOS应用内购买中的商品时,如何自定义错误处理?

    例如 当用户在应用内购买过程中要求登录时 他们可以单击 取消 按钮 然后应用程序将鞋 Can t connect to the iTunes Store 是否可以使用我们自己的回调来代替这个标准消息 我相信您不会收到 无法连接到 iTune
  • 从 App Engine 发送 HTTP 请求

    是否可以从我的 AppEngine 应用程序发送 HTTP 请求 我需要提出一些请求并从其他站点提取一些数据 是的 更多信息请点击这里 http code google com appengine docs python urlfetch
  • 添加 LTV 签名后,某些 pdf 文件已损坏

    我正在尝试在数字签名文档中添加 LTV 在某些文件中 它工作正常 但在某些文件中 它不起作用 我附上所有文件以供参考 我的 LTV 添加代码链接如下https github com akr pdftimestamp https github
  • 上下文包与完成通道以避免 goroutine 泄漏

    有两种不同的方法来清理 goroutine 使用kill 通道来发出取消信号 并使用done 通道来指示goroutine 已终止 type Worker struct Done chan struct Kill chan struct J
  • Tesseract 不使用路径变量

    为什么我的 Tesseract 实例要求我显式设置数据路径 但不想读取环境变量 让我澄清一下 运行代码 ITesseract tesseract new Tesseract String result tesseract doOCR myI
  • 使用react-pdf和react-chartjs-2生成pdf

    我环顾四周 但似乎找不到任何一起使用这两个库的示例 我的项目当前使用react pdf 生成pdf 报告 但我需要将chartjs 图表添加到我们将生成的一些新文件中 我不想使用两个不同的 pdf 库 也不必重新编码应用程序的某些部分以匹配
  • 在 Ubuntu 12.04 上完全删除并全新安装 python

    承认这一点很尴尬 但我只是继续努力在 Ubuntu 安装上设置我的 Python 环境 有时我让它工作得很好 但问题是 我觉得每当我坐下来对 python 项目进行一些业余爱好时 我最终都会花费几个小时来解决与我的 python 安装不一致
  • c# .NET CORE 使用 ITextSharp 将透明图像添加到现有 PDF

    我的目标是在现有 pdf 的每一页上添加公司徽标 不是水印 由于 pdf 文件和徽标的具体情况 我只能将徽标放置在 pdf 内容的顶部 而不是下面 并且徽标必须支持透明度 还有一个限制是我必须使用 NET Core 发布此内容并给出答案 因
  • Excel 中的错误消息

    在将 Excel ApplicationClass 的 DisplayAlerts 属性设置为 false 时 我遇到了以下错误的紧急问题 var excel new Excel Application excel DisplayAlert
  • Silverlight图像编辑器控件[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 您是否知道任何 Silverlight 图像编辑器 控件 商业或开源 主要功能要求 裁剪 调整大小 旋转图像 设置背景颜色 插入文字 插入
  • 如何在 Java 中查找 2D 数组中的子数组是否具有特定的和?

    我试图通过比较源图像和图案图像中存在的像素的平均颜色来解决图像匹配问题 我已将这个问题简化为子数组求和问题 但无法找到解决方法 假设我有一个包含所有正整数的二维数组 ARR 我有一个数字 x 它是小图案图像中存在的像素颜色的平均值 我只需要
  • iPhone - 从另一个视图控制器调用函数

    我有一个名为 sendDataToMotor 的函数 它在我的第一个视图控制器类中 我有另一个名为 SecondViewController 的视图控制器 我需要从 Second View Controller m 类调用此函数 我尝试申报
  • haproxy 全局 maxconn 和服务器 maxconn 的区别

    我对我的 haproxy 配置有疑问 Global settings global log 127 0 0 1 syslog emerg maxconn 4000 quiet user haproxy group haproxy daemo
  • 如何测量并显示单个测试的运行时间?

    我有一个可能需要长时间运行的测试分级测试 test a long running test failAfter Span 60 Seconds 即使测试在超时限制内完成 其运行时间对于运行测试的人来说也是有价值的 我如何测量并显示这个的运行
  • 将 WriteableBitmap 保存为 PNG

    如何将 WriteableBitmap 保存为具有透明背景的 PNG PNG 和带有透明度的 PNG 有区别吗 感谢你的帮助 请给我看示例代码 谢谢 只需浏览以下链接即可 希望这可以帮助你 使用 WPF 将 WriteableBitmap
  • 我如何获得有关谁调用了某个方法的信息?

    我想获得一些有关谁调用了特定方法的信息 也就是说 如果可能的话 获取进行调用的方法的行号和文件名 类似于FILE and LINE 除了堆栈中的下一层 这在高级语言中是可能的 但是在 Objective C 中有什么方法可以做到这一点吗 v
  • 如何调试 Grunt Mocha 任务?

    我正在使用 WebStorm 来运行 grunt 任务 调试器成功停止在 Gruntfile js 文件中的断点处 但不在我的任务文件中 在 Gruntfile js 中 我注册了一个如下任务 grunt initConfig config
  • 错误消息“ENOENT,没有这样的文件或目录”

    我从 Node js 应用程序中收到此错误 ENOENT 没有这样的文件或目录 Desktop MyApp newversion partials navigation jade 我知道该文件在那里 因为当我尝试使用精确复制和粘贴的路径打开
  • jQuery UI 选项卡 - 深度链接到选项卡内容

    我不确定目前这是否可能 而且我所做的测试似乎提供了奇怪的结果 我在一页上有 4 个选项卡 这些选项卡内有几个文本部分 每个部分都有一个唯一的锚点名称 我想做的是从另一个页面链接到选项卡 3 中的第四个内容块 这些选项卡都工作得很好 如果我链