如何動態切換div ID的

我有4個div彼此相鄰，每個包含一個鏈接。我想動態地切換「當前」的ID，例如如何動態切換div ID的

。

<div name="1" id="current"> 
<a> 
link 
</a> 
</div> 
<div name="2"> 
<a> 
link 
</a> 
</div> 
<div name="3"> 
<a> 
link 
</a> 
</div> 
<div name="4"> 
<a> 
link 
</a> 
</div>

如何在點擊鏈接時動態更改當前哪一個？

來源

2012-04-03 Andrew Fairbairn

你使用的是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

不要這樣做。元素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在瀏覽器完成下載頁面的其餘部分之前執行。

來源

2012-04-03 20:27:05 jnylen

I因爲你只想從一個已經存在的元素中刪除.current，因爲你只想從已經存在的元素中刪除.current – 2012-04-03 20:46:21

當然，這是有效的，你的可能也會更快，特別是如果jQuery可以將該選擇器關閉到瀏覽器的本地f unctions。 – jnylen 2012-04-03 20:58:12

我可以問我在哪裏加入這段代碼嗎？由於我對jQuery完全陌生，因此我不太確定事物的佈局。 – 2012-04-03 21:05:20

你可以改變一切，但ID！

來源

2012-04-03 20:24:48

使用一些JavaScript代碼，如var currentId =」div1「來獲取當前id值的實際值 – 2012-04-03 20:29:09

這是一種方法，我更喜歡使用'class ='current''更好，原因有二：你可能不需要來跟蹤當前的ID值，並且使用一個類可以很容易地應用CSS規則。 – jnylen 2012-04-03 20:41:13

我同意類方法更先進..我只想向他展示使用javascript來跟蹤當前編號的最簡單方法 – 2012-04-03 21:21:04

如何動態切換div ID的

回答

相關問題