Question

我正在尝试创建一个onclick事件，它将显示/隐藏数组的元素，但是我正在努力使用下面的 showSubTabGroup（）函数。

旁注：最后我想将此 onmouseenter和onmouseleave ，而不是“点击”，如下所示。

我希望能够点击div并在下方显示后续div，就像您对导航功能所期望的那样。

控制台没有返回任何错误，“点击”功能似乎正常警告（“点击”）。

非常感谢任何帮助。

问题：

Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) {
  this.tab[tabIndex].addEventListener('click', function () {
    alert("CLICKED");//Testing 'click' call
    for (var i = subTabIndex; i < this.subTabGroup; i++) {
      this.subTab[i].style.display = "";
    }
  });
}

使用Javascript：

function Tab (subTabGroup) {
  this.tab = document.getElementsByClassName("tab");
  this.subTab = document.getElementsByClassName("sub-tab");
  this.subTabGroup = subTabGroup;
}

Tab.prototype.hideSubTabs = function () {
  for (var i = 0; i < this.subTab.length; i++) {
    this.subTab[i].style.display = "none";
  }
}

Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) {
  this.tab[tabIndex].addEventListener('click', function () {
    for (var i = subTabIndex; i < this.subTabGroup; i++) {
      this.subTab[i].style.display = "";
    }
  });
}

var tab = new Tab(3);
tab.hideSubTabs();
tab.showSubTabGroup(0,0);

HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Responsive Nav</title>
</head>
<body>
  <!-- JQuery CDN -->
  <script src="http://code.jquery.com/jquery-3.1.0.js"></script>

  <div class="container">
    <div class="tab">
      <p>TAB</p>
    </div>
    <div class="sub-tab">
      <p>SUBTAB</p>
    </div>
    <div class="sub-tab">
      <p>SUBTAB</p>
    </div>
    <div class="sub-tab">
      <p>SUBTAB</p>
    </div>
  </div>

  <div class="container">
    <div class="tab">
      <p>TAB</p>
    </div>
    <div class="sub-tab">
      <p>SUBTAB</p>
    </div>
    <div class="sub-tab">
      <p>SUBTAB</p>
    </div>
    <div class="sub-tab">
      <p>SUBTAB</p>
    </div>
  </div>

  <div class="container">
    <div class="tab">
      <p>TAB</p>
    </div>
    <div>
      <div class="sub-tab">
        <p>SUBTAB</p>
      </div>
      <div class="sub-tab">
        <p>SUBTAB</p>
      </div>
      <div class="sub-tab">
        <p>SUBTAB</p>
      </div>
    </div>
  </div>

  <script type="text/javascript" src="tab.js"></script>
  <script type="text/javascript" src="tabEvents.js"></script>

</body>
</html>

Answer 1

点击内部this的问题。它不是您的选项卡代码，它是您单击的元素的引用。您需要使用bind

来更改它

Tab.prototype.showSubTabGroup = function (tabIndex, subTabIndex) {
  this.tab[tabIndex].addEventListener('click', (function () { 
    for (var i = subTabIndex; i < this.subTabGroup; i++) {
      this.subTab[i].style.display = "";
    }
  }).bind(this));
}

Answer 2

当我阅读你的帖子时，我认为hideSubTabs（）正常工作。在这种情况下，我建议在showSubTabGroup（）中使用：

this.subTab[i].style.display = "initial";

而不是

this.subTab[i].style.display = "";

“initial”将设置为默认值，例如div的“block”和span的“inline”

我看到你也包含了jQuery。如果我可能会问为什么jQuery函数不能用更少的代码执行相同的操作：

$('.tab').on('click',function() {
    $(this).closest('.container').find('.sub-tab').toggle()
})

$('.tab').click();
$('.tab')[0].click();

使用js click事件处理程序设置CSS属性

2 个答案: