不要這樣做。元素ID不應該根據網頁的狀態而改變。改用另一個屬性,如class="current"
。
如果你使用jQuery,我強烈建議,你可以這樣做如下:
$('div.tab a').click(function() {
$('div.tab').removeClass('current');
$(this).closest('div.tab').addClass('current');
return false;
});
爲了使此代碼工作,你需要添加class="tab"
您<div>
元素。這是一個好主意,尤其是如果您在頁面上有其他<div>
元素。如果您這樣做,那麼當前選項卡將有一個屬性class="tab current"
。 jQuery知道如何正確處理這個問題。
而且,我會考慮使用id
屬性,而不是name
屬性,並給你的<a>
標記一個href
屬性,這樣瀏覽器將其顯示爲可點擊元素。例如:
<div id="tab1" class="tab">
<a href="#">tab 1</a>
</div>
下面是如何將這個腳本(假設你有JQuery的在同一目錄中的HTML頁面保存爲一個文件jquery.js
)爲例:
<!DOCTYPE html>
<html>
<head>
<title>Testing jQuery</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$('div.tab a').click(function() {
$('div.tab').removeClass('current');
$(this).closest('div.tab').addClass('current');
return false;
});
});
</script>
</head>
<body>
<div id="tab1" class="tab current">
<a href="#">tab1 link</a>
</div>
<div id="tab2" class="tab">
<a href="#">tab2 link</a>
</div>
<div id="tab3" class="tab">
<a href="#">tab3 link</a>
</div>
<div id="tab4" class="tab">
<a href="#">tab4 link</a>
</div>
</body>
</html>
有幾點需要注意:
真的,最好把你的網站的JavaScript放在並且包含它與<script type="text/javascript" src="filename.js"></script>
,但包括它「內聯」就像我所做的對於小型項目來說很好,或者只是玩弄東西。
$(function() { ... });
是$(document).ready(function() { ... });
的簡寫形式,這意味着只要瀏覽器加載完HTML文檔結構,該塊內的代碼就會被執行。例如,您不希望JavaScript在瀏覽器完成下載頁面的其餘部分之前執行。
你使用的是jQuery嗎? – mikevoermans 2012-04-03 20:24:07
你不應該改變ID的,而應該在每個div上添加/刪除一個名爲'current'的類。 – 2012-04-03 20:25:59
我沒有使用jquery,我只是最近纔開始教自己的HTML和最近的JavaScript,後者我不太明白。 – 2012-04-03 20:47:12