如何动态切换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的

回答

相关问题