仅用a标签实现点击导航栏跳转到页面对应位置

最新推荐文章于 2023-11-03 16:16:04 发布
最新推荐文章于 2023-11-03 16:16:04 发布
阅读量2.6k 收藏 7
点赞数
文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/amercury0818/article/details/128418142
版权

点击导航栏跳转到页面对应位置

a标签是最便捷的方式，不过没有下滑或者上滑的动画，是直接切换到指定位置的

html代码：

<body>
	<div>  <!-- 导航栏 -->
		<a href="#first">首页</a>   <!-- href="#" 或者 href="#top" 也可以转到顶部 -->
		<a href="second">第二页</a>
		<a href="third">第三页</a>
	</div>
	
	<!-- 不同页面 -->
	<div id="first">首页</div>
	<div id="second">第二页</div>
	<div id="third">第三页</div>     <!-- <a href="#bot">第三页</a> 也可以转到顶部 -->
</body>

修改a标签样式css代码：

a {
	text-decoration: none;    /* 去掉下划线 */
	color: white;   /* 去掉默认字体颜色：紫色 */
}

a标签其他功能：

mailto: 点击发送邮箱
在这里插入图片描述
tel: 点击拨打电话
在这里插入图片描述

电竞林品如
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js导航栏A标签锚点跳转
10-16
"js导航栏A标签锚点跳转"是JavaScript在网页交互中的常见应用，主要用于实现页面内部链接的平滑滚动效果。这个话题涉及到的知识点包括HTML锚点、JavaScript事件处理和DOM操作。 首先，HTML锚点（#标识符）允许我们...
Django模板标签中url使用详解(url跳转到指定页面)
12-20
在Django框架中，`{% url %}`模板标签是一个非常重要的功能，用于生成视图函数对应的URL路径。这个标签能够确保代码与URL配置保持松耦合，提高代码的可维护性和可扩展性。以下是关于`{% url %}`模板标签的详细解释。...
html怎么点击导航栏后跳转页面,Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例...
weixin_35122299的博客
06-03 2231
解决方法有两种：一种是直接给当前页面添加特殊样式，当网页刷新或者跳转到下一页后，样式消失；另一种情况是即使刷新页面后样式仍然有效。直接上代码：第一种情况：$(document).ready(function(){$(".nav a").each(function(){$(this).click(function(){$(".nav .hover").removeClass("hover");$(t...
HTML中a标签的使用方法及跳转方式
2301_76965813的博客
03-20 1万+
第一章第二章第三章第一章第二章第三章
用css设置锚点：点击一个元素会跳到相应的位置
YY的博客
09-16 4289
锚点介绍
超详细的vue结合ElementUI实现头部导航栏进行页面跳转
qq_48961214的博客
04-24 7647
vue中实现顶部栏路由跳转
点击垂直导航栏中的某项实现页面跳转CSS+JavaScript
qq_62649563的博客
03-23 1746
这里用到的是CSS盒子的思想 首先我们需要用一个大盒子作为主体页面 接着放三个小盒子 来完成页面的布局。
2.HTML跳转到页面指定位置的几种方法
最新发布
qq_44438941的博客
11-03 5304
日常总结
导航标签跟随滚动到对应文章段落
11-21
当用户点击导航标签时，页面会平滑地滚动到相应章节，而不是立即跳转。这通常通过JavaScript实现，例如使用jQuery的`animate()`函数配合锚点链接来实现平滑滚动效果： ```javascript $('a').click(function(event) ...
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
11-29
在使用公共模板的项目中，如左侧固定导航栏，每个菜单项都可能链接到不同的页面。当用户点击一个链接跳转到新页面时，如果菜单样式不变，用户可能会迷失方向。因此，动态加载当前页面对应的菜单样式至关重要，以确保...
点击导航栏切换页面
03-24
这是一个运行在AS上的project，里面是点击导航栏切换页面的三种方式的moudle
页面位置动态定位导航菜单
06-05
为了提供更好的用户体验，可以使用JavaScript实现平滑滚动效果，当用户点击导航菜单中的链接时，不是立即跳转，而是以动画形式慢慢滚动到目标位置。这可以通过`window.scrollTo`的平滑滚动选项或者使用jQuery的`...
今日问题：Vue++ElementUI --- 导航栏路由跳转方法
weixin_52053631的博客
04-15 1874
【代码】今日问题：Vue++ElementUI --- 导航栏路由跳转方法。
利用a标签锚点定位实现切换页面的部分内容
榕城候佳人的博客
10-27 1068
最近在做一个数据可视化大屏的作业，其中需要实现点击不同的按钮，大屏中间内容呈现不同的数据分析图表，页面其他部分不发生改变。之前考虑过复制多个页面然后改变中间的页面，但是这样会导致文件冗余，而且由于静态文件放在不同的文件夹，所以每个复制的页面都要调整文件路径！废话不多说先看代码。不过核心就是下面这句话：把所有要切换的内容放在一个大的div里面，然后用对应的div放对应的要切换的页面，每个div设置一个id。（当然也有一些用js实现的，但是我还么学，所以只能用这个了，而且这个也是非常方便相较于js）
页面a跳转到页面b指定位置的方法
alokka的博客
07-07 7430
页面a跳转到页面b指定位置的方法1.锚点法a.html里：<a href="b.html#abc">xxx</a>b.html里加一个锚点：<div name="abc"></div>这样就可以直接跳转到只能位置啦在一个页面a进行跳转方法一、跳转到顶部 1、首先我们在网页body内最上面添加一个<span id="top" name="top"></span> 2、我们再到body内，需要出现点击后
a标签href实现页面内容点击定位
技术博客
05-07 6548
一，应用场景        点击页面目录标题，实现在本页面锚链接相应内容。 二，实现原理        &lt;a&gt;标签href属性，根据元素id，定位元素位置。 &lt;div class="headList"&gt; &lt;h3&gt;目录索引&lt;/h3&gt; &lt;ul class="index"&gt; &
超链接href="#"点击后会回到页首的解决办法
yushuir的专栏
09-12 1155
网页的时候会经常使用到点击文字出现某种效果，这样就需要设置为超链接的方式，如果你写href="#"那么点击后会回到页首，这样影响操作。为了让点击不回到页首，有以下两种方式可以解决： &lt;a href="javascript:void(0)" onclick="window.open('yoururl')"&gt;人员管理&lt;/a&gt;&lt;a href="javascript:r.
layuimini框架中点击顶部导航栏跳转到指定模块首页
m0_61236764的博客
07-25 3556
在参与的一个后台项目开发中使用到了layuimini后台模板框架，其中有三个后台模块，现在需要实现的功能是点击顶部导航栏就会跳转到对应模块的首页。作为一名小白，研究这个问题需要想到的是点击左侧页面菜单栏能进行定向跳转，是如何实现的，在导航栏进行复用就行。于是需要改动layuimini的miniMenu.js,添加以下代码以实现功能。在左侧菜单栏中是存在layuimini-href，这大概是跳转的问题所在。...
点击导航栏切换页面的几种方式
热门推荐
zsr0526的博客
03-22 5万+
1.RedioGroup+Fragment(推荐) 2.底部线性布局+帧布局(放fragment) 3.RedioGroup+Viewpager
vue3 setup语法糖写法实现从A页面跳转至另一个有底部导航切换标签页的B页面，怎么实现在A页面中不出现底部导航栏
07-08
在Vue 3中，可以使用`<router-view>`组件和路由配置来实现从A页面跳转至B页面，并在A页面中不显示底部导航栏。以下是一种可能的实现方式： 1. 首先，确保已经安装了Vue Router，并在项目的入口文件中进行配置。 2. 在路由配置文件中定义路由，包括A页面和B页面的路径和组件。假设底部导航栏位于App组件中，B页面是App组件的子组件。 ```javascript // router.js import { createRouter, createWebHistory } from 'vue-router'; import A from '@/views/A.vue'; import B from '@/views/B.vue'; const routes = [ { path: '/', name: 'A', component: A, }, { path: '/b', name: 'B', component: B, }, ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 3. 在A页面的模板中，使用`<router-link>`组件来进行跳转至B页面。这样可以实现从A页面跳转至B页面，而不显示底部导航栏。 ```html <!-- A.vue --> <template> <div> <h1>A 页面</h1> <router-link to="/b">跳转至 B 页面</router-link> </div> </template> ``` 4. 在App组件的模板中，使用`<router-view>`组件来渲染当前页面对应的组件。 ```html <!-- App.vue --> <template> <div> <router-view></router-view> <footer><!-- 底部导航栏 --></footer> </div> </template> ``` 这样，在A页面中点击"跳转至 B 页面"的链接时，Vue Router会根据路由配置自动渲染B页面，并在A页面中不显示底部导航栏。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值