Question

我有4个div，彼此相邻，每个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>

如何在点击链接时动态更改当前的哪一个？

Answer 1

不要这样做。元素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。

Answer 2

除了id，你可以改变一切！

如何动态切换div id

2 个答案: