`

a标签href实现页面内容点击定位

阅读更多

一,应用场景

       点击页面目录标题,实现在本页面锚链接相应内容。

二,实现原理

       <a>标签href属性,根据元素id,定位元素位置。

<div class="headList">
     <h3>目录索引</h3>
     <ul class="index">
            <li><a href="#1">接口文档1</a></li>
            <li><a href="#2">接口文档2</a></li>
            <li><a href="#3">接口文档3</a></li>
            <li><a href="#4">接口文档4</a></li>
     </ul>
</div>
<div class="content">
      <li id="1" class="content_li"><span>接口文档1详情</span></li>
      <li id="2" class="content_li"><span>接口文档2详情</span></li>
      <li id="3" class="content_li"><span>接口文档3详情</span></li>
      <li id="4" class="content_li"><span>接口文档4详情</span></li>
</div>

   

       

分享到:
评论

相关推荐

    jquery实现网页定位导航

    不知道大家有没有注意到有的网页由于页面信息量太大所以使用了页面定位导航来实现跳转,点击旁边的菜单的某一项页面就跳到那一项对应的内容,而且我们滚动滚动条,当滚动到某一项内容,旁边菜单对应的那一项也会高亮...

    页面内锚点定位及跳转方法总结(推荐)

    最简单的方法是锚点用&lt;a&gt;标签,在href属性中写入DIV的id。如下: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; div { height: 800px; width: 400px; border: 2px solid black; } h2 { ...

    JS如何实现在页面上快速定位(锚点跳转问题)

    本文介绍了JS如何实现在页面上快速定位(锚点跳转问题),分享给大家,具体如下: 1. 锚点跳转简介 锚点其实就是可以让页面定位到某个位置上的点。在高度较高的页面中经常见到。 锚点跳转有两种形式: a标签 + ...

    详解Vue项目中实现锚点定位

    今天在开发限时练-提分加项目的时候,有一个需要锚点定位的需求,而在Vue项目中,使用传统的在a标签的href属性中写id的方法无效,会导致浏览器的地址改变从而跳转到其他页面。 解决 最终参考vue2.0中怎么做锚点定位...

    css笔记课程笔记2019,5,22

    &lt;a href="" target="_blank"&gt;&lt;/a&gt; 4、表格标签 ** 技巧:数里面有多少行,每行里面有多少个单元格 ** &lt;table&gt;&lt;/table&gt; &lt;tr&gt; &lt;td&gt; 5、表单标签 ** &lt;form&gt;&lt;/form&gt; - action method enctype - ...

    python爬虫mac版本猪精原创

    - `a/@href` :选择a的href的值 - 4. 获取文本: - `/a/text()` :获取a下的文本 - `/a//text()` :获取a下的所有的文本 - 5. 点前 - `./a` 当前节点下的a标签 - lxml - 安装:pip install lxml - 使用...

    Web前端大作业2.0.zip

    首先设计网站主页也就是核心内容index.html,先要设计总体的导航条栏目,并点击对应主题来到其链接的详情页,这里采用href标签,用id进行位置定位。页面总体采用 CSS+DIV 布局,最外层DIV为框架,导航条设计。

    js实现弹窗效果

    5.js事件绑定span标签,点击后让弹窗页面消失 代码如下 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;弹窗&lt;/title&gt; &lt;link href="../css/弹窗....

    JQUERY实现网页右下角固定位置展开关闭特效的方法

    本文实例讲述了JQUERY实现网页右下角固定位置展开关闭特效的方法。分享给大家供大家参考。具体如下: html代码: 热门标签... &lt;li&gt;&lt;a href='/tag/js\u5c55\u5f00\u6536\u8d77_1.html'&gt;js展开收起&lt;/a&gt; &lt;li&gt;&lt;a ...

    html入门到放弃笔记

    赵旭 ... ...1、WEB基础知识(了解) 1、Internet - 网 由若干台电脑、手机、平板 通过 网线(WIFI) 连接起来的结构 2、基于Internet上的程序 ... 2、创建一个超链接,内容为 :学子商城的LOGO,点击时,在新标签页中打开...

    jQuery详细教程

    jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。 选择器允许您对 HTML 元素组或单个元素进行操作。 在 HTML DOM 术语中: 选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。...

    PageGuideMvc:页面指​​南Mvc

    PageGuideMvc 是网页元素的交互式视觉指南。 不要用静态帮助消息或解释性文本使界面混乱,添加页面指南并让您的用户了解新特性和功能。 您可以动态加载和卸载用户指南,微调每个步骤的定位,并在指南的所有部分...

    仿世纪佳缘婚介交友系统5.3 ASP+SQL

    很多客户初始安装之后都会发现很多网页都跳转到官方网站上,还以为是程序限制,其实并不是这样。原因就在二级域名没有修改为自己的域名,这里主要修改二级域名(静态文件访问地址)。修改完提交保存!然后到生成...

    SEO Extension [Metrics, Backlinks, On-Page]-crx插件

    单击“反向链接”选项卡,查看包括SEO和其他指标在内的最有价值的反向链接:-Mangools开发的链接强度-源URL-引文流-信任流-HREF-锚文本如果您打算进行深入的反向链接分析,请单击点击“展开”按钮进入LinkMiner。...

    《javaScrip开发技术大全》源代码

    • sample04.htm 在同一个网页中使用不同脚本语言 • sample05.htm 判断浏览器对JavaScript版本的支持情况 • sample06.htm 引用外部JavaScript • sample07.htm 在同一个HTML文档...

Global site tag (gtag.js) - Google Analytics