Bootstrap 下拉菜单 - 不适用于子页面

2024-01-12

我正在使用引导程序并创建了一个下拉菜单。主要项目是一个在主页上有效但在子页面上无效的链接。

这是我的代码:

<li>
  <a href="/preview/#design-centre" class="dropdown-toggle scroll" 
     data-toggle="dropdown" data-hover="dropdown">
    Design Centre <i class="fa fa-angle-down"></i>
  </a>
  <ul class="menulist dropdown-menu">
    <li><a href="/preview/#design-centre">Overview</a></li>
    <li><a href="/preview/design-centre.php?action=video-testimonials">Video Testimonials</a></li>
    <li><a href="/preview/design-centre.php?action=meet-the-team">Meet The Team</a></li>
    <li><a href="/preview/design-centre.php?action=faq">FAQ</a></li>
    <li><a href="/preview/design-centre.php?action=contact-us">Contact Us</a></li>
  </ul>
</li>

当我单击“设计中心”时,它不会在子页面上执行任何操作,但在主页上会执行任何操作,导航中但不是下拉菜单的所有其他链接都可以工作。


This should工作正常。您想要做的事情本身与 Bootstrap 无关,而只是尝试使用锚链接在文档内导航以及另一个文档的片段。这只是标准的 HTML 标记。

The 片段标识符 http://www.w3.org/TR/REC-html40/intro/intro.html#fragment-uri是 URI 的一部分:

指资源内的位置

只要这些链接单独工作,它们就应该在您的代码中工作。

有些事情可能会搞砸:

  • 如果您使用相对 URL,则地址将根据您在导航中的位置而变化。由于您的 href 地址以斜杠开头,因此情况似乎并非如此。
  • 您可以尝试转换以下行:

    <li><a href="/preview/#design-centre">Overview</a></li>
    

    为此(假设您的根页面是index.html):

    <li><a href="/preview/index.html#design-centre">Overview</a></li>
    

    有时,可以通过资产管道推断页面,但通常最好是明确的。

这是 plunker 中的一个工作示例 http://plnkr.co/edit/FVaHRGX8XoMHMHYjdwGS?p=preview

这是一个可运行的版本 http://run.plnkr.co/plunks/FVaHRGX8XoMHMHYjdwGS/index.html包括一个主页和带有工作片段的子页面

除此之外,我们还需要更多信息来诊断。如果仍然不起作用,请尝试分叉 plunker 并添加明显显示问题的任何更改。

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

Bootstrap 下拉菜单 - 不适用于子页面 的相关文章

  • Internet Explorer 中的 AJAX 问题

    这在 FF safari chrome 和 opera 中工作得很好 但在 IE 中却不行 错误代码是403 var datau trends php 3Frastgele 3D33 ajax type GET url loader php
  • Bootstrap

    我正在尝试使用 Bootstrap 构建一个网站 到目前为止 一切都按计划进行 我想要一个固定的导航栏 并且我正在使用内置函数 div class navbar navbar fixed top 这很棒 正是我所需要的 但我希望导航和标题从
  • 在问题内显示内联块文本

    我一直在尝试显示内联块 如果我没有在 div 中添加任何内容 一切都会很好 但是当我这样做时 div 会折叠起来 我不知道确切的原因 任何想法 https jsfiddle net giancorzo ebqoptbd https jsfi
  • 固定 Div 与静态 div 的滚动条重叠

    我无法按照我想要的方式设计布局 我有一个内容区 content 您可以在示例图像中看到的灰色 里面有一个黄色元素 这个div是position static height 100 现在我有一个 left paneldiv 也 与positi
  • 有没有一种方法可以在没有输入的情况下发送表单值

    假设我有以下表格
  • Ionic 2:隐藏滚动条并继续滚动

    我只想hide滚动条 在需要滚动的页面中 我正在使用离子2 My 不工作解决方案 scroll content bar overflow hidden 此解决方案隐藏滚动条but使屏幕不可滚动 首先 改变浏览器的自然行为和预期的用户体验是一
  • Webkit 是否有 CSS3 网格布局的有效实现?

    CSS 网格布局 编辑草案 2011 年 11 月 21 日 http dev w3 org csswg css3 grid align 我正在制作一个原型 该原型将在选定的设备和浏览器上向客户展示 目前我并不担心跨浏览器兼容性 IE10开
  • Django Ajax ModelForm 向 request.POST 提交一个空表单

    对于 django ajax 和 jquery 我是个新手 所以如果我的问题显得微不足道 我提前道歉 我已经在这个问题上摸不着头脑有一段时间了 但我正在尝试使用 ajax 和 jquery 通过 jQuery UI 提供的模式对话框窗口提交
  • 如何使用 jQuery 选择第一个块级父级?

    考虑以下标记 div h1 span span lorem ipsum span span h1 div 如何找到块级别的 span 3 的第一个父级 即具有display block 使用 jQuery 在这种情况下 那就是h1 1 3
  • jquery 上下文菜单插件 - 右键单击​​事件类型在哪里?

    我正在研究下面插件的代码 想知道它在何时何地与 右键单击 事件相关联 它所做的只是 插件参考链接 http www javascripttoolbox com lib contextmenu http www javascripttoolb
  • 使用 float:left 与 display:inline-block 的 jQuery UI 拖放排序比较

    我这里有两个例子 这两个例子之间的唯一区别是 一种使用display inline block 另一种使用float left li doc item 显示 内联块 与 li doc item float left 我的问题是 displa
  • AngularJS + jQuery 移动

    是否还有其他可能性来设计AngularJS以移动友好的方式应用程序CSS 我正在计划一个移动应用程序 并希望使用 AngularJS 进行逻辑和数据绑定 但我不想自己设计所有内容CSS The AngularJSFAQ说它使用jQuery
  • 使用 Bootstrap 4 隐藏表列

    我知道 Bootstrap 4 使用新的显示实用程序 https getbootstrap com docs 4 0 utilities display 根据屏幕尺寸显示或隐藏信息 我的问题是如何使这些与表格一起使用 由于屏幕尺寸较小 我想
  • 禁用复选框上的输入

    需要在取消选中该复选框时禁用输入 并在选中该复选框时启用它 我的代码是这样的 div class y div
  • WordPress 子主题包括包含文件

    我在一家WordPress使用 AMPPS 作为本地主机在我的本地计算机上进行设置 使用 Delta 主题 我创建了一个子主题 delta2 child 初始设置效果很好 但是 我需要更改包含文件夹中名为 home slider php 的
  • javascript - 如何获取对象名称或关联数组索引名称?

    我有一个像这样的 JSON 对象 var list name1 element1 value1 name2 element1 value2 如何提取所有 nameX 字符串值 例如 假设我想将它们连接在一个字符串中输出 例如 name1 n
  • 当php脚本通过ajax运行时显示进度条

    我有一个通过 ajax 向服务器提交值的表单
  • Google Apps 脚本中 $.ajax() 的服务器端等效项是什么?

    我想在 Google App 脚本中从服务器端代码执行 HTTP 请求Authorization标头 是否有用于发送 HTTP 请求的 App Script API Google Apps 脚本中的这段代码相当于什么 var api URL
  • 触发 jQuery UI 滑块事件

    如何触发更改事件jQuery UI 滑块 http docs jquery com UI Slider 我以为会是 slider trigger slidechange 但这没有任何作用 完整的示例脚本如下
  • Cycle2 初始化事件未触发

    我使用 Cycle2 作为基本的轮播 我的幻灯片项目有时在其数据中包含一个 url 因此我必须使用 Cycle2 api 事件来使用该 url 当它存在时 我的问题是 虽然 cycle after 事件触发正常 但初始化事件都不会触发 因此

随机推荐

  • 如何浏览 Oracle 服务器上的数据库?

    因此 我作为一名 SQL Server 开发人员 早在很早以前就编写过一些 PL SQL 但实际上却一无所知 我有一台笔记本电脑 它运行 Oracle 笔记本电脑上有一个数据库 我需要查看一下 但我或我能与之交谈的其他人都不知道它的名字 我
  • 如何在spyder中添加python控制台

    升级spyder版本3 2 1后 我在spyder中找不到python控制台 当我通过Ipython控制台交互式地绘制数据时很不方便 如何将python控制台添加到spyder中 Spyder 开发者在这里 Spyder 中完全删除了 Py
  • 在将 XElement 添加到匿名对象之前,如何检查该 XElement 是否不为 null?

    我正在从 XML 文件填充匿名对象 到现在为止 commentary Elements Commentator 总是有一个值 所以我从来不需要检查是否为空 但我不得不删除它 现在当它尝试读取该行时它失败了 我正在查看代码 但不知道要更改什么
  • 如何忽略 Subversion 中的文件?

    如何忽略 Subversion 中的文件 另外 如何找到不受版本控制的文件 此答案已更新以匹配 SVN 1 8 和 1 9 的行为 您有 2 个问题 将文件标记为忽略 我所说的 忽略文件 是指该文件不会出现在列表中 即使是 未版本控制 您的
  • Tornado 异步 HTTP 增量返回结果

    据我从tornado gen模块文档中了解到 tornado gen Task由tornado gen Callback和tornado gen Wait组成 每个回调 等待对都与唯一键关联 tornado web asynchronous
  • 避免预标记内的边距[重复]

    这个问题在这里已经有答案了 如何避免内部边距pre tag p Some text p pre code Some code code pre p Some text p 电流输出 所需的输出 当前的解决方案是手动删除标记中的缩进 如下所示
  • 如何从 Doctrine Fixture 参考中获取实体?

    我在项目中添加了依赖于彼此引用实体对象的数据装置 在数据夹具一中 我添加了实体引用 例如 GroupEntity Fixtures php file this gt addReference GROUP USER groupUser thi
  • C# SHA1 与 PHP SHA1...结果不同?

    我正在尝试从字符串计算 SHA 1 哈希值 但是当我使用 php 的 sha1 函数计算字符串时 我得到的结果与在 C 中尝试时不同 我需要 C 来计算与 PHP 相同的字符串 因为来自 php 的字符串是由我无法修改的第 3 方计算的 如
  • 当我尝试初始化 GoogleMap 对象时,出现 NullPointerException

    我正在尝试在我的片段类之一中显示一张地图 我在 XML 类中为地图创建了一个片段 并按如下方式使用它 Override public View onCreateView LayoutInflater inflater ViewGroup c
  • javascript 引擎能够识别 HTML 编码的字符串,这怎么可能呢?

    出色地 这个夜晚对我来说是一个非常奇怪的夜晚 很抱歉在之前创建了另外两个问题后又创建了一个新问题 但这完全是另一个论点 如果我在这里得到答案 我也会得到这些问题的答案 所以请有人听我说并尝试理解 这一切都始于通过 aspx 代码隐藏文件生成
  • 如何在 C# 中使用 zxing 应用 Reed-Solomon 算法

    我想通过嘈杂的通道传输二进制数据 我读到 Reed Solomon 是一个很好的检测错误的 ECC 算法 问题是我不理解这个算法的输入 这是我对 zxing net 的天真失败的尝试 int toEncode 123 232 432 var
  • git:可靠地切换到分离的 HEAD,然后稍后恢复 HEAD,所有这些都来自脚本

    这是场景 我有一个运行一些测试的脚本 我需要制作另一个接受 git 提交名称作为参数的脚本 然后执行以下操作 保存当前提交状态 分支名称或未命名提交 在指定的提交处切换到分离的 HEAD 针对该提交运行测试脚本 切换回来 因此 HEAD 与
  • 找不到用于渲染完成的 ReportViewer 事件

    当 ReportViewer 控件完成渲染时 我试图触发一个事件 以删除自定义进度 状态指示器 我已经研究了 ReportViewer 控件的事件 但似乎找不到在报表完成时实际触发的事件 我正在使用 Visual Studio 2010 和
  • 将标签放置在分档/步进颜色条指南中分档的中间?

    推理 我想轻松使用现成的连续刻度 来自任何提供的包 scale continuous等 对于类似序数因子的数据 例如mtcars cyl 因为这些数据只包含几种离散值 所以我想直接标记图例键 而不是容器限制 怎么做 library ggpl
  • 如何在写入 CSV 文件时附加到新行[重复]

    这个问题在这里已经有答案了 我想在写入时附加到 CSV 文件中的新行 当前的 CSV 文件如下所示 a b c 1 1 1 我的附加到 CSV 文件的代码 with open mycsvfile csv a as f writer csv
  • 如何实现更高效的搜索功能?

    在我的数据库中有 3 列 分别是姓名 年龄 性别 在程序中 我只想使用 1 个搜索按钮 单击该按钮时 程序会确定哪 3 个文本框已输入并搜索正确的数据 您如何处理查询 例如 如果姓名和性别有文本 则查询 Select from table
  • Java 中的类型转换和自动类型提升

    让我们考虑一下 Java 中的一些简单表达式 byte var 0 var byte var 1 这里 在上面的语句中 显然由于自动类型提升而需要类型转换 表达式的评估 var 1 自动提升为 int 因此 必须显式转换为 byte 以将其
  • 在运行时更改时,表单验证会忽略语言

    我正在使用 CodeIgniter 构建多语言 Web 应用程序 我有英语和其他语言 system languages 文件夹 我创建了一个负责在运行时更改工作语言的模型 默认情况下 CodeIgniter 以法语工作 如中定义 appli
  • 将 S3 上传/浏览与 django-tinymce 集成

    我一直在寻找有关如何将 Amazon S3 与 TinyMCE 集成的资源 到目前为止我想到的最好的链接是 http forums aurigma com yaf postst4033 Amazon S3 File Manager for
  • Bootstrap 下拉菜单 - 不适用于子页面

    我正在使用引导程序并创建了一个下拉菜单 主要项目是一个在主页上有效但在子页面上无效的链接 这是我的代码 li a href preview design centre class dropdown toggle scroll Design