代码之家 › 专栏 › 技术社区 › op1001

普通javascript onload点击模拟

html javascript

op1001 · 技术社区 · 5 年前

我在想。。。我有一个是由一些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,我就无法理解如何模拟一个假单击,或者强制它使tab 3处于活动状态,并使panel3显示;table row

编辑:我使用了这个代码

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代码。

1 回复 | 直到 5 年前

zer00ne 5 年前

不需要单击。一旦页面加载完毕,服务器完成了任务,运行脚本。这通常是通过放置 <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>