`
阅读更多

先介绍下场景:

我做了一个博客管理

首页界面如下:

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

 

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

<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

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

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

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

    WebEditor.zip

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

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

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

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

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

    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页面...

    给html超链接设置事件不使用href来完成跳

    这是因为在执行完了onClick事件后,又去跳转href所指向的地址了,而”#“是个锚点,默认是网页的页首,所以会带来上边所说的问题。 解决方法有以下两种: 1、onClick事件添加return false语句,例如: 代码如下: &lt;a&gt;

    网页制作初学者:学用HTML的超链接A标记

    超级链接a标记代表一个链接点,是英文anchor(锚点)的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像,这已是众所周知了,但关于它的语法结构可能有点鲜为人知,而要用活它则必须了解其语法...

    seo优化之搜索引擎语法

    文本,如这样的一段html 代码:百度,链接的锚点 就是“百度”了,搜索inanchor:百度,就可以搜索到那些含有锚点的网页了 五、site:这个语法是起限制作用的,即把搜索限制在站点域名范围之内。

    HTML开发王

    7.4.1 定义命名锚点(id属性和name属性) 7.4.2 链接到命名锚点 7.5 文档关系链接(link元素) 7.5.1 定义关系链接地址(href属性) 7.5.2 向前链接或者反转链接(rel和rev属性) 7.5.3 链接到外部样式表 7.5.4 使用link元素...

    Web前端大作业-港珠澳大桥.zip

    1、设计的目的 做个网站以纪念港珠澳大桥彰显大国基建魅力,为中国...导航栏主要采用a标签以及span标签,并在a标签里面用锚点链接到其对应的模块位置,点击即可跳转到指定位置,使得网站更加人性化,方便展示内容。

Global site tag (gtag.js) - Google Analytics