用锚点进行HTML页面内容的跳转

原创 2013年12月04日 15:30:33

介绍

我们知道,JavaScript可以实现HTML页面上非常丰富的事件和动作,比如说点击工具栏某个按钮时,显示相应特定的内容并隐藏其他。但在有些Web应用部署的实际情况中,会禁用除了HTML之外的其他代码,比如JavaScript和CSS。那如何实现类似的效果呢?

经过尝试,本人发现用锚点也可以实现页面内容的跳转。具体来说,就是当点击某个按钮时,跳转到特定的内容处。当工具栏有若干按钮时,每个按钮都实现类似功能,看起来就和“点击工具栏某个按钮时,显示相应特定的内容并隐藏其他”效果类似。

下面来看看具体是如何实现的。

 

例子

这个例子中的网页显示了每个星期一、二、三分别包含哪些日期。比如点击星期一时,就会跳转并显示相应的日期。


 

代码

test.html

<div style="width: 100%; height: 50px; font-family: arial; font-size: 36px; margin-bottom: 10px; background-color: rgb(160, 176, 192);">
	Day Checker
</div>
<a name="day_1"></a> 
<div style="margin-bottom: -5px;">	
	<a href="#day_1"
		style="background-color: #BeBeBe;color: #000000;display: inline-block;height: 30px;text-align: center;text-decoration: none;width: 100px;font-weight: bold;">Monday</a>
	<a href="#day_2"
		style="background-color: #BeBeBe;color: #000000;display: inline-block;height: 30px;text-align: center;text-decoration: none;width: 100px;">Tuesday</a>
	<a href="#day_3"
		style="background-color: #BeBeBe;color: #000000;display: inline-block;height: 30px;text-align: center;text-decoration: none;width: 100px;">Wednesday</a>
</div>
<div>
	<p>2012-9-2</p>
	<p>2012-9-9</p>
	<p>2012-9-16</p>
	<p>2012-9-23</p>
	<p>2012-9-30</p>
	<p>2012-10-7</p>
	<p>2012-10-14</p>
	<p>2012-10-21</p>
	<p>2012-10-28</p>
	<p>2012-11-4</p>
	<p>2012-11-11</p>
	<p>2012-11-18</p>
	<p>2012-11-25</p>
	<p>2012-12-2</p>
	<p>2012-12-9</p>
	<p>2012-12-16</p>
	<p>2012-12-23</p>
	<p>2012-12-30</p>
	<p style="margin-bottom:100px;">2014...</p>
</div>
<a name="day_2"></a> 
<div style="margin-bottom: -5px;">	
	<a href="#day_1"
		style="background-color: #BeBeBe;color: #000000;display: inline-block;height: 30px;text-align: center;text-decoration: none;width: 100px;">Monday</a>
	<a href="#day_2"
		style="background-color: #BeBeBe;color: #000000;display: inline-block;height: 30px;text-align: center;text-decoration: none;width: 100px;font-weight: bold;">Tuesday</a>
	<a href="#day_3"
		style="background-color: #BeBeBe;color: #000000;display: inline-block;height: 30px;text-align: center;text-decoration: none;width: 100px;">Wednesday</a>
</div>
<div>
	<p>2012-9-3</p>
	<p>2012-9-10</p>
	<p>2012-9-17</p>
	<p>2012-9-24</p>
	<p>2012-10-8</p>
	<p>2012-10-15</p>
	<p>2012-10-22</p>
	<p>2012-10-29</p>
	<p>2012-11-5</p>
	<p>2012-11-12</p>
	<p>2012-11-19</p>
	<p>2012-11-26</p>
	<p>2012-12-3</p>
	<p>2012-12-10</p>
	<p>2012-12-17</p>
	<p>2012-12-24</p>
	<p>2012-12-31</p>
	<p style="margin-bottom:100px;">2014...</p>
</div>
<a name="day_3"></a> 
<div style="margin-bottom: -5px;">	
	<a href="#day_1"
		style="background-color: #BeBeBe;color: #000000;display: inline-block;height: 30px;text-align: center;text-decoration: none;width: 100px;">Monday</a>
	<a href="#day_2"
		style="background-color: #BeBeBe;color: #000000;display: inline-block;height: 30px;text-align: center;text-decoration: none;width: 100px;">Tuesday</a>
	<a href="#day_3"
		style="background-color: #BeBeBe;color: #000000;display: inline-block;height: 30px;text-align: center;text-decoration: none;width: 100px;font-weight: bold;">Wednesday</a>
</div>
<div>
	<p>2012-9-4</p>
	<p>2012-9-11</p>
	<p>2012-9-18</p>
	<p>2012-9-25</p>
	<p>2012-10-9</p>
	<p>2012-10-16</p>
	<p>2012-10-23</p>
	<p>2012-10-30</p>
	<p>2012-11-6</p>
	<p>2012-11-13</p>
	<p>2012-11-20</p>
	<p>2012-11-27</p>
	<p>2012-12-4</p>
	<p>2012-12-11</p>
	<p>2012-12-18</p>
	<p>2012-12-25</p>
	<p style="margin-bottom:100px;">2014...</p>
</div>

技术点

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 页面内锚点定位及跳转方法总结

项目中经常会出现点击跳转锚点的方法,比如给一个a标签一个href=“#锚点”,然后要跳的锚点给个id=“锚点”,这样就实现简单的跳转,但是这样在url地址栏后面都会出现一个诸如www.csdn.net...
  • this_ITBoy
  • this_ITBoy
  • 2017年07月24日 15:11
  • 5872

html/js定位到锚点(单页hash跳转)

锚点 * {margin: 0; padding: 0;} h1 {background: blue;} h1 > strong {b...
  • u011500781
  • u011500781
  • 2016年02月28日 21:42
  • 3433

mui几种页面跳转方式对比

 http://blog.csdn.net/uikoo9/article/details/44676963 【几种打开页面的方式】 1.初始化时创建子页面 2.直接打开新页面 3.预加载...
  • kenkao
  • kenkao
  • 2016年02月22日 10:44
  • 44268

锚点的几种常见用法及跳转方法

第一种方法:              div {             height: 800px;             width: 400px;           ...
  • qq_31879707
  • qq_31879707
  • 2017年01月25日 18:05
  • 3158

js跳转到锚点

在页面tiaj       location.hash="#navBar";
  • liu__hua
  • liu__hua
  • 2014年08月14日 10:30
  • 30887

HTML锚点控制,跳转页面后定位到相应位置

想在点击更多的页面 跳转后  用户能看到的是新闻  不用在用scollbar托下来到新闻页面  这时候就需要在链接上 做下处理  查看更多  在 a链接的后面加载 #view 然后在另外这个新闻页面...
  • zero_295813128
  • zero_295813128
  • 2016年03月23日 15:46
  • 9999

html5 - 超链接基础和锚点

超连接就是打开另外一个页面,可以是本地的,也可以是网页,也可以通过图片来打开。 一:基础超链接 超连接 超连接网址 链接到本地 发邮件 下载,...
  • li5685918
  • li5685918
  • 2015年12月08日 09:26
  • 5871

HTML 页面内定位跳转

锚标签和 href 属性 HTML 使用 (锚)标签来创建连接另一个文档的链接。锚可以指向网络上的任何资源:一张 HTML 页面,一幅图像,一个声音或视频文件等等。 用来创建锚。href 属性...
  • ranbolwb
  • ranbolwb
  • 2012年04月05日 15:46
  • 17807

跳转到页面的指定位置, 锚点平滑跳转

锚点平滑跳转
  • qq_36073929
  • qq_36073929
  • 2016年12月14日 11:04
  • 807

HTML页面跳转的5种方法

下面列了五个例子来详细说明,这几个例子的主要功能是:在5秒后,自动跳转到同目录下的hello.html(根据自己需要自行修改)文件。 1) html的实现   ...
  • linshichen
  • linshichen
  • 2016年05月11日 14:53
  • 656
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用锚点进行HTML页面内容的跳转
举报原因:
原因补充:

(最多只允许输入30个字)