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 选项卡 - 深度链接到选项卡内容 的相关文章

随机推荐

  • 结合 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 中的第四个内容块 这些选项卡都工作得很好 如果我链