`
阅读更多

先介绍下场景:

我做了一个博客管理

首页界面如下:

 标题是超链接,点击标题,进入博客详情页面:

 

博客标题下面有一个"返回"超链接,点击回到博客列表,超链接代码:

<a href="javascript:history.go(com.whuang.hsj.hrefClickCount)">返回</a>

 说明:com.whuang.hsj.hrefClickCount的初始值为-1 ,

 

后来我发现有的博客很长,从博客底部回到标题那儿,必须滚动鼠标滚老半天,太不人性化了.

于是我在博客底部增加了一个超链接"回到博客标题",如下:

 但是问题出现了:

我点击"回到博客标题"超链接之后,再点击"返回",又会回到博客底部,我知道什么原因.

"回到博客标题"超链接 使用了锚点跳转,但是也属于跳转,跳转之后,博客底部就属于history了.所以再点击"返回"超链接就会回到history.

"回到博客标题"超链接实现代码:

var aInput =document.createElement("a");  
                aInput.href="#title_loc";
                aInput.innerHTML="回到博客标题";
                aInput.className="frontBlogHrefClass";//class 样式,在单独的css文件中定义
                aInput.onclick=function(){
                    //注意:不论点击多少次"回到博客标题",go(-2)就可以回到博客列表
                    com.whuang.hsj.hrefClickCount=-2;
                }
                contentDiv.appendChild(aInput);

                var span333 =document.createElement("span");  
                span333.innerHTML="&nbsp; |&nbsp;<a class=\"frontBlogHrefClass\" href=\"javascript:history.go(com.whuang.hsj.hrefClickCount)\">返回博客列表</a>";
                contentDiv.appendChild(span333);

 锚点位置:

 

 

怎么办呢?

解决方法:

"回到博客标题"超链接点击一次就把com.whuang.hsj.hrefClickCount 自减1,但是实际测试有问题,如果我点击两次以上,再点击"返回"页面就会回到很早的页面(不是博客列表页面).

最终解决方法:

不论点击多少次"回到博客标题",go(-2)就可以回到博客列表


 

注意:

(1)后台采用spring MVC 框架;

(2)博客详情页面的"返回博客列表"超链接和"返回"超链接相同.

 

  • 大小: 18.2 KB
  • 大小: 96.5 KB
  • 大小: 46.3 KB
  • 大小: 32.5 KB
  • 大小: 57.3 KB
  • 大小: 35.1 KB
0
0
分享到:
评论

相关推荐

    超链接,锚点,跳转练习.html

    属于课后练习,做个html网页,在网页里加入锚点,超链接,跳转等课上学习的内容。(网页里的内容纯属于练习所用,无作其他用于)

    使用HTML开发商业网站-锚点链接课件.pptx

    使用HTML开发商业网站 锚点链接 超链接标签 超链接标签 创建锚点链接分为两步 例如 平面广告设计 . . . 平面广告设计 超链接标签 超链接标签 谢谢大家

    0601超链接与导航栏02_锚点与热区.mp4

    超链接与导航栏02_锚点与热区+网页+Html+CSS+JS 网页设计与制作 基础篇 原创慕课教程【学银在线】。配套教材《网页设计与制作(Html5+CSS3+JavaScript)》,清华大学出版社。

    HTML中的超链接标签使用教程

    锚点的布置HTML超链接以标签作为锚点进行触发,锚点需要有一个载体,而这个载体可以是一个文字、一个词、或者一句话,也可以是图像或者某个形状。当鼠标移动到带有锚点的载体上时,鼠标会变成一个小手的状态,示意...

    第五课 html超链接-011

    超链接的类别文本超链接图像超链接联系我们锚点链接学习前端,最

    Lesson01_05 HTML中的超链接

    HTML中的超链接 HTML中的超链接是HTML中最基本也是最重要的一种标签,通过超链接可以连接到其他网页、Email或者是文件等。下面将详细介绍HTML中的超链接。 基本格式 HTML中的超链接的基本格式为:&lt;A HREF=" "&gt;&lt;/...

    html制作网页必做入门练习题一PPT教案.pptx

    在本教案中,我们将讲解链接和锚点的使用,包括超链接(A)、锚点(A NAME)等。 六、练习和总结 在本教案的最后,我们将通过一系列的练习题和示例代码,帮助学生巩固所学的知识点,并对本教案进行总结和回顾。 ...

    使用HTML和css来完成的个人网页.zip

    使用HTML和css来仿写一个个人网址,包含音乐播放、实时时间,锚点跳转,超链接,然后是包含了所有需要用到的元素,打开就能编辑,字体也打好了包,点开直接就能用了!

    WebEditor.zip

    一个轻量级的web编辑器,由原生js编写,拥有功能:HTML代码,加粗,斜体,下划线,删除线,上标,下标,字号,字体,...插入视频,锚点,超链接,取消超链接,插入直线,插入表格,插入HTML,插入分页标记,打印,全频

    (完整word版)HTML+CSS+Div测试习题.doc

    "HTML+CSS+Div 测试习题" 本文档为 HTML+CSS+Div 测试习题,涵盖了 HTML、CSS、Div 等多个方面的知识点。以下是相关知识点的详细说明...23. `”#csust"&gt;郑州大学软件学院&lt;/a&gt;` 的作用是创建一个到锚点 csust 的链接。

    HTML(超文本标记语言)笔记.txt

    HTML(超文本标记语言)是用于构建网页结构和内容的标记语言。它是Web开发的基础,用于描述网页中各个元素的层次结构、语义以及如何呈现内容。...链接和锚点: 使用标签创建超链接,指向其他页面、文件或资源。可

    link-checker:HTMLHTML页面的超快速链接检查器

    链接检查器HTML页面的链接检查器,用于检查href属性(包括目标中的锚点)。 命令行界面要求在本地文件系统上有一个目录,该目录将被扫描。 我为什么写这个工具? 我使用的是一个很好的CLI,称为 ,但是由于使用...

    html+css面试题答案.docx

    href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。src 是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置。 CSS Hack CSS Hack 是一种在 CSS 中...

    网页设计考试试题及试题答案详解(笔试和上机,基础班)

    在超链接中,需要注意锚点的定义和使用,以便在单击超链接时跳转到锚点定义的位置。 Dreamweaver 网页设计 Dreamweaver是Adobe公司的一款网页设计软件,广泛应用于网页设计和开发中。Dreamweaver提供了许多强大的...

    MattWeinberg24.github.io

    MattWeinberg24.github.io 学习HTML,CSS和Javascript的网站 进度追踪器 第1天:创建网站,基本设置,网站图标,文本存在,背景色 ...第5天:实体,Lorem,换行,锚点,超链接,光标指针,Div,下载标记,Flex容器

    JSP的系统性教材

    ☆锚点链接 ★表格 ☆表格的行属性 ☆表格的单元格属性 ☆嵌套表格 ☆表格的结构 ★表单的应用 ☆form标记 ☆input标记 ☆列表与文本区 ★框架 ☆框架集与框架 ☆浮动框架 ☆框架链接 HTML的英文全称是Hyper Text ...

    06html基础1.4.mp4

    本节视频课主要讲解:Html5基础——超链接标签、锚点链接、什么是URL等等 ,这几个知识点。

    html入门到放弃笔记

    超文本 a : 表示超链接 普通文本 b : 普通字符 b 超文本 b : 加粗显示文本 标记 :超文本的表现形式 普通文本 a : a 超文本 a : &lt;a&gt;&lt;/a&gt; 语言 :具备一定的语法规范 HTML 也具备自己的语法规范 WEB页面...

Global site tag (gtag.js) - Google Analytics