Javascript 正在查找所选元素的索引_Javascript_Jquery_Html_Css

Javascript 正在查找所选元素的索引

javascript jquery html css

Javascript 正在查找所选元素的索引,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我跟随Semmy Purewal的书学习html/css、javascript、jQuery等。在他的一个例子中，读者必须在网页上创建三个选项卡，并编写代码，以使用户单击的选项卡具有一个名为“活动”的类在将该类添加到单击的选项卡之前，我需要找出它的索引——这就是我遇到的问题所在这是我的HTML代码： <!doctype html> <html> <head> ... </head> <body> <

我跟随Semmy Purewal的书学习html/css、javascript、jQuery等。在他的一个例子中，读者必须在网页上创建三个选项卡，并编写代码，以使用户单击的选项卡具有一个名为“活动”的类

在将该类添加到单击的选项卡之前，我需要找出它的索引——这就是我遇到的问题所在

这是我的HTML代码：

<!doctype html>
<html>
  <head>
    ...
  </head>

  <body>
    <header>
      ...
    </header>

    <main>
      <div class="container">
        <div class="tabs">
          <a href=""><span class="active">Newest</span></a>
          <a href=""><span>Oldest</span></a>
          <a href=""><span>Add</span></a>
        </div>
        <div class="content">
          <ul>
            ...
          </ul> 
        </div>
      </div>
    </main>

    <footer>
      ...
    </footer>

    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

var makeActiveTab = function(tabNum) {
    //make all the tabs inactive
    $(".tabs span").removeClass("active");

    //make the first tab active
    $(".tabs a:nth-child(" + tabNum + ") span").addClass("active");

    //empty the main content so we can recreate it
    $("main .content").empty();

    //return false so we don't follow the link
    return false;
};

var main = function() {
    "use strict";
    var index;
    $(".tabs a").click("click", function() {
        index = $(this).index();
    });

    console.log(index);
};

$(document).ready(main);

控制台输出的不是单击选项卡的索引，而是“未定义”。我能做些什么来解决这个问题

以下是我迄今为止咨询过的信息来源列表：

<!doctype html>
<html>
  <head>
    ...
  </head>

  <body>
    <header>
      ...
    </header>

    <main>
      <div class="container">
        <div class="tabs">
          <a href=""><span class="active">Newest</span></a>
          <a href=""><span>Oldest</span></a>
          <a href=""><span>Add</span></a>
        </div>
        <div class="content">
          <ul>
            ...
          </ul> 
        </div>
      </div>
    </main>

    <footer>
      ...
    </footer>

    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

var makeActiveTab = function(tabNum) {
    //make all the tabs inactive
    $(".tabs span").removeClass("active");

    //make the first tab active
    $(".tabs a:nth-child(" + tabNum + ") span").addClass("active");

    //empty the main content so we can recreate it
    $("main .content").empty();

    //return false so we don't follow the link
    return false;
};

var main = function() {
    "use strict";
    var index;
    $(".tabs a").click("click", function() {
        index = $(this).index();
    });

    console.log(index);
};

$(document).ready(main);

您需要将console.log（）移动到click事件中，如下所示：

var main = function() {
    "use strict";
    var index;
    $(".tabs a").click("click", function() {
        index = $(this).index();
        console.log(index);
    });


};

现在，只要文档就绪，console.log（）就会运行，因为只要执行main，它就会运行。因为还没有发生单击事件，所以索引变量没有值。

这是因为您在单击任何内容之前就记录了变量。