介紹

我們知道，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;”。