首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当href=“页面链接”时,活动菜单不工作,但当我设置href="#“时,活动菜单工作。

当href="页面链接"时,活动菜单不工作,但当我设置href="#"时,活动菜单工作。

这个问题涉及到前端开发中的超链接(<a>标签)和页面锚点的使用。

  1. 超链接(<a>标签):在HTML中,超链接用于在不同的页面之间建立链接。它通过href属性指定链接的目标页面。当href属性的值是一个有效的页面链接时,点击超链接会跳转到该页面。例如,href="https://www.example.com"会跳转到https://www.example.com这个网址。
  2. 页面锚点:页面锚点是指在同一页面内部的不同位置之间建立链接。通过在超链接的href属性中设置#加上目标位置的ID,可以实现在同一页面内部的跳转。例如,href="#section1"会跳转到页面中ID为section1的位置。

根据你的描述,当href="页面链接"时,活动菜单不工作,可能是因为该页面链接无效或者不存在。这可能是由于链接地址错误、文件路径错误、页面未正确部署等原因导致的。需要检查链接地址是否正确,并确保目标页面存在。

而当设置href="#"时,活动菜单工作,是因为#代表当前页面的顶部,即页面的起始位置。这样设置后,点击超链接会回到页面的顶部,不会跳转到其他页面。

综上所述,要解决活动菜单不工作的问题,需要确保页面链接的正确性和有效性。如果需要进一步调试和排查问题,可以使用浏览器的开发者工具查看网络请求和错误信息,以便找到并修复问题。

(腾讯云相关产品和产品介绍链接地址暂无)

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

bootstrap源码分析之scrollspy(滚动侦听)

源码文件: Scrollspy.js 实现功能 1、当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 2、导航必须是 .nav > li > a 结构,并且a上href...One的具体内容One的具体内容One的具体内容One的具体内容One的具体内容One的具体内容 源码分析: 1、原理:当滚动容器内的...hashkey位置距离容器顶部只有 offset设置的值,就会设置导航中对应的href高亮 2、如果滚动区域是body,会将滚动区域元素标记为window(构造函数中判断) this....$scrollElement.scrollTop() //获取基础高度,如果滚动区域内有不参与滚动计算的内容 }   4.2、根据导航上的hashkey来遍历获取 滚动区域内的hashkey对应的...i为当前活动项 } 6、active:设置指定的导航菜单高亮 7、clear:清除所有高亮菜单

1.1K100
  • 使用HTML制作静态网站:传统文化戏剧锡剧带psd设计图(2个页面)

    一套优质的网页设计应该包含 (具体可根据个人要求而定) 页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分。 所有页面相互超链接,可到三级页面,有5-10个页面组成。...页面样式风格统一布局显示正常,不错乱,使用Div+Css技术。 菜单美观、醒目,二级菜单可正常弹出与跳转。 要有JS特效,如定时切换和手动切换图片轮播。...页面中有多媒体元素,如gif、视频、音乐,表单技术的使用。 页面清爽、美观、大方,不雷同。 。 不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。...在学习过程中,我们会发现每一个知识点都是有她的边界和背景的,我们要善于归纳整理知识 第三、学到了就要用到 有时,我们一天下来感觉学到了很多干货,那么我们一定要将这些知识点和实际工作和生活联系起来。...爱学习是一件好事,但只有会学习的人,才有价值。 【获取方式】 gitee码云源码仓库-欢迎Star: https://gitee.com/zhanyuqiu2022/my-app

    57030

    基于HTML+CSS+JavaScript仿车蚂蚁网页设计与实现 (24页)

    一套优质的网页设计应该包含 (具体可根据个人要求而定) 页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分。 所有页面相互超链接,可到三级页面,有5-10个页面组成。...页面样式风格统一布局显示正常,不错乱,使用Div+Css技术。 菜单美观、醒目,二级菜单可正常弹出与跳转。 要有JS特效,如定时切换和手动切换图片轮播。...页面中有多媒体元素,如gif、视频、音乐,表单技术的使用。 页面清爽、美观、大方,不雷同。 。 不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。...在学习过程中,我们会发现每一个知识点都是有她的边界和背景的,我们要善于归纳整理知识 第三、学到了就要用到 有时,我们一天下来感觉学到了很多干货,那么我们一定要将这些知识点和实际工作和生活联系起来。...爱学习是一件好事,但只有会学习的人,才有价值。 【获取方式】 gitee码云源码仓库-欢迎Star: https://gitee.com/zhanyuqiu2022/my-app

    70620

    要提升前端布局能力,这些 CSS 属性需要学习下!

    ,并将安全链接设置为与不安全链接不同: a[href^="http"]{ color: bisque; } a:not([href^="http"]) { color: darksalmon;...它还使得连续下载大量文件的工作流程更加容易。下载属性的缺点是没有默认的视觉效果将其与更传统的链接区分开来。...details和summary标签是一种只用HTML做扩展/手风琴菜单的方法,details 包括了summary标签和手风琴打开时要展示的内容。...没有 controls 属性的 audio 我不经常使用audio标签,但是当我使用它时,我经常忘记包含controls属性。 结果:没有显示任何内容。...只需查看页面就很难找到它们,但如果添加它们,它们就会弹出来(当页面图片加载失败时,alt文字可以更好的解释图片的作用): img:not([alt]) { /* no alt attribute */

    1.7K30

    学生个人网页设计作品:基于HTML+CSS+JavaScript实现摄影艺术网站 DIV布局简单的摄影主题网站

    一套优质的网页设计应该包含 (具体可根据个人要求而定) 页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分。 所有页面相互超链接,可到三级页面,有5-10个页面组成。...页面样式风格统一布局显示正常,不错乱,使用Div+Css技术。 菜单美观、醒目,二级菜单可正常弹出与跳转。 要有JS特效,如定时切换和手动切换图片轮播。...页面中有多媒体元素,如gif、视频、音乐,表单技术的使用。 页面清爽、美观、大方,不雷同。 。 不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。...font-size:18px; margin:0 6%; color:#333; line-height:32px; } 六、 如何让学习不再盲目 第一、带着目标去学习,无论看书报课还是各种线下活动...爱学习是一件好事,但只有会学习的人,才有价值。 【获取方式】 gitee码云源码仓库-欢迎Star: https://gitee.com/zhanyuqiu2022/my-app

    1.2K20

    纵向、横向导航菜单及二级弹出菜单

    ;text-decoration:none;} /*设置鼠标悬浮超链接上时改变字体颜色*/ a:hover{color:#F00;} 下面是将同一子菜单下的菜单移动位置变为父级菜单的一部分...普通文档流中元素的布局就像绝对定位的元素不存在时一样。(因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。...,当鼠标离开父级菜单时隐藏子菜单,因此可以使用display的none属性隐藏菜单,当鼠标移动到父级菜单上时使用display:block显示菜单。.../*鼠标移动到父级菜单时显示子菜单*/ #menu ul li:hover ul{display:block;} 最后的页面代码如下: <%@ page language="java" import=...;text-decoration:none;} /*设置鼠标悬浮超链接上时改变字体颜色*/ a:hover{color:#F00;} /*设置父级菜单样式*/ #menu ul li{background

    5.8K30

    WEB入门.九 导航菜单

    网易的导航菜单主要分为站标和内容两部分,站标区不覆盖其他文字,可直接使用 img标签插入网易站标。使用 ul和 li搭建内容部分,ul 中使用两个 li方法分行显示内容块,再使用若干超链接定义菜单。...,每个超链接文本前后添加绝对定位的 span标签,以设置左右箭头span标签在链接状态下隐藏、悬停状态下显示。...5.1 下拉式导航菜单 当页面版式比较紧凑时,页面设计适合使用下拉式导航菜单。该菜单形式充分利用现有空间并分类显示页面内容,如娃哈哈企业网等采用该菜单形式,如图 5.1.11所示。...1.5个字宽*/} 定义嵌套ul 的样式规则时,需要设置ul为绝对定位,并脱离标准文档流,否则一级菜单宽度将被改变 本章总结 在这一章里制作2个垂直方向的导航菜单。...(2) 在一些列盒子排列之后,如何对头尾盒子进行单独的样式设置,可以为它们单独设置类别,或者是伪类,但需要注意浏览器对伪类的支持情况。

    45010

    WEB入门.九 导航菜单

    网易的导航菜单主要分为站标和内容两部分,站标区不覆盖其他文字,可直接使用 img标签插入网易站标。使用 ul和 li搭建内容部分,ul 中使用两个 li方法分行显示内容块,再使用若干超链接定义菜单。...,每个超链接文本前后添加绝对定位的 span标签,以设置左右箭头span标签在链接状态下隐藏、悬停状态下显示。...5.1 下拉式导航菜单 当页面版式比较紧凑时,页面设计适合使用下拉式导航菜单。该菜单形式充分利用现有空间并分类显示页面内容,如娃哈哈企业网等采用该菜单形式,如图 5.1.11所示。...1.5个字宽*/ } 定义嵌套ul 的样式规则时,需要设置ul为绝对定位,并脱离标准文档流,否则一级菜单宽度将被改变 ​本章总结​ 在这一章里制作2个垂直方向的导航菜单。...(2) 在一些列盒子排列之后,如何对头尾盒子进行单独的样式设置,可以为它们单独设置类别,或者是伪类,但需要注意浏览器对伪类的支持情况。

    52610

    认识一下 Material Design Lite 布局组件

    确切的说,MDL可以根据屏幕的尺寸设定样式类 的不同显示效果: 桌面 - 当屏幕宽度大于840px时,MDL按桌面环境应对 平板 - 当屏幕尺寸大于480px,但小于840px时,MDL按平板环境应对...比如,自动隐藏 header、drawer区域等 手机 - 当屏幕尺寸小于480px时,MDL按手机环境应对 配置选项 MDL class 说明 mdl-layout 声明元素为布局组件 mdl-js-layout...--导航链接--> href="...">link href="...">link href="..."...当用户点击 选项栏中的链接/tab*时,自动显示对应的选项面板: ?...可以设置修饰样式类mdl-layout--fixed-drawer来强制显示侧拉菜单(在小尺寸 屏幕下,侧拉菜单总是隐藏的): <div class="mdl-layout mdl-layout--fixed-drawer

    2.6K20

    大学生HTML作业节日网页 HTML作业节日文化网页期末作业 html+css+js节日网页 HTML学生节日介绍 HTML学生作业网页视频

    网页技术方面应用包括网页背景颜色、字号字体设置、超链接、图文页面、菜单栏、顶部大图等网页基础知识点 一套优质的网页设计应该包含 (具体可根据个人要求而定) 页面分为页头、菜单导航栏(最好可下拉)、中间内容板块...所有页面相互超链接,可到三级页面,有5-10个页面组成。 页面样式风格统一布局显示正常,不错乱,使用Div+Css技术。 菜单美观、醒目,二级菜单可正常弹出与跳转。...页面中有多媒体元素,如gif、视频、音乐,表单技术的使用。 页面清爽、美观、大方,不雷同。 。 不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。...按照我国古代记时法,晚上11时到第二天凌晨1时为子时。...年节虽定在农历正月初一,但年节的活动却并不止于正月初一这一天。从腊月二十三(或二十四日)小年节起,人们便开始"忙年":扫房屋、洗头沐浴、准备年节器具等等。

    4.6K21

    使用这些 CSS 属性选择器来提高前端开发效率!

    ,并将安全链接设置为与不安全链接不同: a[href^="http"]{ color: bisque; } a:not([href^="http"]) { color: darksalmon;...它还使得连续下载大量文件的工作流程更加容易。下载属性的缺点是没有默认的视觉效果将其与更传统的链接区分开来。...details和summary标签是一种只用HTML做扩展/手风琴菜单的方法,details 包括了summary标签和手风琴打开时要展示的内容。...没有 controls 属性的 audio 我不经常使用audio标签,但是当我使用它时,我经常忘记包含controls属性。 结果:没有显示任何内容。...只需查看页面就很难找到它们,但如果添加它们,它们就会弹出来(当页面图片加载失败时,alt文字可以更好的解释图片的作用): img:not([alt]) { /* no alt attribute */

    2.5K50

    前端开发需要知道的一些 CSS 属性选择器!

    ,并将安全链接设置为与不安全链接不同: a[href^="http"]{ color: bisque; } a:not([href^="http"]) { color: darksalmon;...它还使得连续下载大量文件的工作流程更加容易。下载属性的缺点是没有默认的视觉效果将其与更传统的链接区分开来。...details和summary标签是一种只用HTML做扩展/手风琴菜单的方法,details 包括了summary标签和手风琴打开时要展示的内容。...没有 controls 属性的 audio 我不经常使用audio标签,但是当我使用它时,我经常忘记包含controls属性。 结果:没有显示任何内容。...只需查看页面就很难找到它们,但如果添加它们,它们就会弹出来(当页面图片加载失败时,alt文字可以更好的解释图片的作用): img:not([alt]) { /* no alt attribute */

    2K20

    JavaScript 代码分析

    (ev){ } document. (){ }; } 这个结构是当鼠标落下在div1上的时候执行一个函数,然后这个函数里面包括两个函数,一个是当鼠标在页面移动时,一个是当鼠标离开页面时。...下面这个条件判断主要作用是,鼠标超出页面时,保证div1在页面内,document.documentElement.clientWidth页面宽度,oDiv.offsetWidth是div1宽度,document.documentElement.clientHeight...当l时,令l=0是左边的控;当l>document.documentElement.clientWidth-oDiv.offsetWidth时,令l=document.documentElement.clientWidth-oDiv.offsetWidth...是右边的控制;当t时,令t=0s是上边的控制;当t>document.documentElement.clientHeight-oDiv.offsetHeight时,令t=document.documentElement.clientHeight-oDiv.offsetHeight...下面还有一个div,里面默认是第一个月活动内容。

    96420

    jQuery练习——下拉菜单

    ---- 一、HTML样式 当我们在做导航栏、少量数据表格、层级列表时,使用无序列表ul、li可以实现想要的效果。这里我们先用无序列表ul、li完成页面结构,为每一个元素添加a标签,即超链接。...,我们为盒模型设置宽度和高度,让文字分开。...为一级菜单的元素添加position:relative;意为相对定位,在元素原有的位置基础上,根据设置的left调整元素位置,这样做不会改变页面布局,不影响其他元素的偏移。...; margin-left: 5px; } .nav-item:hover { background-color: rgba(132, 240, 204, 0.359); } 接下来设置二级菜单的样式...使用position: absolute;让二级菜单对于一级菜单来说绝对定位。 使用left、transform设置居中对齐,设置display:none;隐藏下拉菜单。

    27.9K20

    你的 Link Button 能让用户选择新页面打开吗?

    分2种情况,你可以在掘金页面试一下:2.1 新标签页(tab)打开Command(Mac)/Ctrl(Windows) + 鼠标左键click鼠标中键click鼠标右键click,在菜单选择“在新标签页中打开链接...”(无障碍)通过Tab,选中链接时,按Command(Mac)/Ctrl(Windows) + 回车键Enter2.2 新窗口(window)打开Shift + 鼠标左键click鼠标右键click,在菜单选择...“在窗口中打开链接”(无障碍)通过Tab,选中链接时,按Shift + 回车键Enter3....(如果是标签,用户hover时,会在浏览器左下方看到新页面 URL)4.2 中手方案:+onclick+event 【不推荐】工作2个月后,我懂了点用户体验,但知识局限于:用户点击...这些问题的解决方案 【划重点】使用a标签,用href指明要跳转到地方。这样用户可以主动选择在新页面打开(例如通过右键菜单)。

    7.2K171

    前端如何提高用户体验:增强可点击区域的大小

    当使用HTML 元素时,会获得下面效果: 可通过鼠标,键盘或触摸访问 可以通过键盘选中 有对应的 JavaScript 方法 有些元素,我们需要添加 padding,原因有二: 让它更美观...链接 之前在做导航的时候,犯了一个错误,应该是给 a 标签添加 padding 而不是 li: href="#">Home...复选框和单选按钮 当存在复选框或单选按钮元素时,我希望可以单击它或关联的标签来激活/禁用它。 ? 从用户体验的角度来看,这是难以访问和糟糕的。...侧边栏 对于带有类别的页面,有时我会注意到列表链接没有扩展到其父页面的整个宽度。 也就是说,可点击区域仅在文本上,如下图所示: ?...这个想法是,伪元素属于其父元素,因此当我们创建具有特定宽度和高度的伪元素时,它将充当其父元素的单击/触摸/悬停区域。

    5.4K20
    领券