Question

我正在尝试解决这个问题... 我有一个用服务器上的一些javascript喂的，当使用jquery时根本无法正常工作，因此我必须坚持使用普通javascript ..

我想做的是加载一个页面，该页面始终默认为三个选项卡中的第一个选项卡，但我希望它触发一个假的模拟点击以加载第三个选项卡，而不是默认为第一个选项卡。

<ul>
<li class="active"><a href="#">tab 1</a></li>
<li><a href="#">tab 2</a></li>
<li><a href="#">tab 3</a></li>
</ul>

所馈送的javascript自动将内联样式“ display：table-row”写入活动面板，而display：none则写入标签系统的面板3。

所以我不知道是否不使用jquery如何模拟假点击或强制它使选项卡3处于活动状态并使面板3显示；表行

编辑：我使用了这段代码

var simulateClick = function (elem) {
    // Create our event (with options)
    var evt = new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window
    });
    // If cancelled, don't dispatch our event
    var canceled = !elem.dispatchEvent(evt);
};
var someLink = document.querySelector('#panel3');
simulateClick();

我忘记添加我尝试使用的Java代码。

Answer 1

不需要单击。一旦页面被加载并且服务器完成了它要执行的任务后，请运行您的脚本。通常可以通过将<script>标记放在结束</body>标记之前来完成此操作。演示中将对详细信息进行评论。

const setActive = targetIndex => {
  /*
  Collect all <a> into a HTMLCollection then convert
  to an Array.
  */
  const linx = Array.from(document.links);

  // Collect all panels into a NodeList
  const panels = document.querySelectorAll('section');

  /* Iterate through the NodeList...
  A - for...of loop using .entries() which returns the
      array [index, value] which we easily access by
      destructuring
  B - Find the current <li>
  C - On each iteration if the current index does not
      equal the given targetIndex then remove .active
      class from <li> and set display: none to style of
      current <section>
  D - Otherwise add .active class and set style to
      display: table-row
  */
  for (let [index, link] of linx.entries()) { //A
    let item = link.parentElement; //B
    if (index != targetIndex) { //C
      item.classList.remove('active');
      panels[index].style.display = "none";
    } else { //D
      item.classList.add('active');
      panels[index].style.display = "table-row";
    }
  }
  return false;
}

setActive(2);

/* Added to prove .active (just for demo -- not required) */

.active {
  outline: 3px dashed #f00
}

ul {
  list-style: none
}

li {
  display: inline-block;
  margin: 0 5px
}

main {
  display: table
}

section {
  display: table-row
}

section * {
  display: table-cell
}

<ul>
  <li class="active"><a href="#">tab 1</a></li>
  <li><a href="#">tab 2</a></li>
  <li><a href="#">tab 3</a></li>
</ul>
<main>
  <section id='panel1'>
    <h3>Panel 1</h3>
  </section>
  <section id='panel2'>
    <h3>Panel 2</h3>
  </section>
  <section id='panel3'>
    <h3>Panel 3</h3>
  </section>
</main>

香草javascript onload点击模拟

1 个答案: