`
GreatExpectations
  • 浏览: 18005 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

关于锚点的简单实用

 
阅读更多
引用:http://blog.csdn.net/eengel/article/details/17119359


技术点

1.      在每块要显示的内容开头,加入标签<a>,并设定它的 “name”属性。比如“<aname="day_1"></a>”。这个标签只是为了跳转控制,因此不包含内容。这样在页面中就看不到。

2.      按钮也用标签<a>做。设定其“href”属性为对应要显示内容的“name”属性值,并用“#”约束。“#”表示在本页内寻找“name”为相应值的标签。

3.      为了让标签<a>长的像按钮,可以设定其“style”属性。比如“<ahref="#day_1"            style="background-color:#BeBeBe;color: #000000;display: inline-block;height: 30px;text-align:center;text-decoration: none;width: 100px;">Monday</a>”。

4.      另外,如果要表示当前所在的是哪个按钮对应的内容,可以加入特殊风格。比如在上面的例子中,当前按钮都会加粗:“font-weight: bold;”。
分享到:
评论

相关推荐

    微信小程序实现锚点效果,方法简单实用!

    在微信小程序开发中,实现页面内的锚点效果可以让用户快速定位到页面的特定区域,提升用户体验。本教程将深入探讨如何在微信小程序中简洁高效地实现这一功能。 首先,我们需要理解锚点的基本原理。在HTML中,锚点是...

    锚点导航栏效果

    这种效果通常应用于内容丰富的长页面,如产品介绍、文章详情或关于我们等页面。 首先,我们需要理解锚点的基本概念。在HTML中,锚点(Anchor)是通过`&lt;a&gt;`标签实现的,它允许我们在同一页面内创建链接,跳转到页面...

    js锚点定位

    总之,JavaScript锚点定位是一个实用且强大的技术,能够提升网页的交互性和用户体验。通过深入理解和灵活运用,开发者可以在不离开当前页面的情况下,提供流畅的浏览体验,使用户能轻松访问页面的各个部分。在实际...

    锚点快速定位到页面中指定位置

    在网页设计中,锚点(Anchor)是一种非常实用的功能,它允许用户通过点击链接快速跳转到页面内的特定位置。本文将深入探讨锚点的工作原理、如何创建锚点以及其在实际网页开发中的应用。 首先,锚点是HTML中标签的一...

    jquery锚点带动画跳转和返回顶部方便定位插件

    在网页设计中,锚点(Anchor)是一种非常实用的功能,它允许用户通过点击链接快速跳转到页面内的特定位置。jQuery 是一个广泛使用的JavaScript库,它提供了丰富的功能和简便的API,使得实现锚点跳转并配合动画效果变...

    jquery锚点

    jQuery提供了一种简单的方法来处理锚点链接。例如,当用户点击一个链接,我们希望页面滚动到对应的锚点位置: ```html 跳转到Section 1 &lt;div id="section1"&gt;Section 1的内容 ``` 在JavaScript中,我们可以监听`...

    jQuery网站右侧锚点定位跳转导航菜单代码

    本文将详细讲解如何使用jQuery实现一个简单的网站右侧锚点定位跳转导航菜单。 首先,jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理和动画效果。在本实例中,jQuery将被用来处理用户...

    使用JS模拟锚点跳转的实例

    在HTML页面开发过程中,锚点跳转是一种常见的导航手段,用户可以通过点击链接快速定位到页面内的某个位置...总之,锚点跳转在Web开发中是一个非常实用的技术点,熟练掌握它将有助于我们开发出更加流畅和友好的Web应用。

    基于vue监听滚动事件实现锚点链接平滑滚动的方法

    本资源详细介绍了基于 Vue 监听滚动事件实现锚点链接平滑滚动的方法,该方法具有实用价值,适用于需要实现平滑滚动的项目。 一、监听滚动事件 监听滚动事件是实现平滑滚动的基础,本方法使用 Vue 的 mounted 钩子...

    源代码:网站制作外卖:实现类似锚点功能.rar

    在网站制作过程中,锚点(Anchor)功能是一个非常实用的设计元素,它允许用户通过点击链接快速跳转到同一页面的特定位置。这个“源代码:网站制作外卖:实现类似锚点功能”的压缩包文件,很显然是为了帮助开发者或...

    设置控件锚点模块-易语言

    总的来说,"设置控件锚点模块"是易语言中一个实用的UI设计工具,通过理解和掌握这个模块,开发者可以创建出更具动态效果和用户体验的软件界面。同时,通过源码学习,也能进一步提升对易语言编程的理解和技能。

    jQuery手机左侧导航锚点定位代码.zip

    本文将深入探讨“jQuery手机左侧导航锚点定位代码”的实现原理和应用,帮助你理解和运用这个实用的代码。 一、jQuery基础与应用 jQuery是由John Resig于2006年创建的JavaScript库,它的核心理念是“Write Less, Do...

    jQuery网站右侧锚点定位跳转导航菜单代码.zip

    总结,"jQuery网站右侧锚点定位跳转导航菜单代码.zip"提供了一个实用的示例,展示了如何利用jQuery轻松实现页面内部的锚点定位跳转。通过理解并实践这个代码,开发者不仅可以掌握这一常见的网页交互功能,也能深入...

    纯css实现的tab切换效果(使用锚点作为标记)

    在本文中,我们将探讨如何使用纯CSS实现一个基于...虽然这种方法可能不适用于更复杂的交互,但对于简单的切换需求,这是一种轻量级且实用的解决方案。在实际项目中,可以根据需要调整样式和布局,以适应各种设计需求。

    jQuery实现平滑滚动到指定锚点的方法

    这种方法不仅实用,而且简单易行。 标签中的“jQuery 平滑滚动 指定锚点 方法”是对本文主题的进一步概括,表明文章将围绕这三个关键词展开详细说明。 在内容中,首先提到了创建一个锚点的方法,即使用id属性标记...

    简单,不华丽实用的JS代码大全

    本文将基于一份名为“简单,不华丽实用的JS代码大全”的资料进行解读,提炼出其中的关键知识点,并结合实际应用场景进行详细说明。 #### 关键知识点解析 ##### 1. 事件操作与监听 - **事件源获取**:通过`event....

    返回页面顶部top按钮通过锚点实现(自写)

    描述中提到的情况是,开发者在实际工作中遇到的场景,即用户在处理长表单时可能需要一个便捷的方式返回页面顶部,因此开发者自编了一个简单实用的top按钮。 在实现这个功能时,主要涉及的技术包括HTML锚点和...

    jQuery制作顶部浮动导航菜单定位特效加选中当前栏目

    在网页设计中,导航菜单是用户浏览网站时的重要指引,而顶部浮动导航菜单更是常见且实用的设计元素。本文将深入探讨如何使用jQuery技术来创建一个具有浮动效果和锚点导航功能的顶部菜单,并实现当页面滚动到特定内容...

    简单实用的HTML代码

    从给定的文件信息中,我们可以提炼出一系列关于HTML(超文本标记语言)的重要知识点,这些知识点涵盖了HTML的基础标签、格式化文本、插入图像、创建链接以及页面布局等关键方面。 ### HTML基础标签 1. **预格式化...

Global site tag (gtag.js) - Google Analytics