将部分焦点更改为 Foundation CSS 中的按钮单击

Question

我正在使用 Foundation CSS，需要一些关于 section 对象的帮助。我的页面上有一个选项卡式部分

<div class="section-container tabs" data-section="tabs">
<section id="section1">
<p class="title" data-section-title><a href="#">Step 1</a></p>
<div class="content" data-section-content>
<input type="text" id="firstname" placeholder="First Name">
</div>
</section>

<section id="section2">
<div class="content" data-section-content>
<input type="text" id="phone" placeholder="Phone">
</div>
</section>

What I am trying to do is have a next button on section1 that would take me to section 2 by using this

<button class="small button" id="next1" onclick="document.getElementById('section2').className ='active';document.getElementById('section1').style ='padding-top: 49px';document.getElementById('section1').className ='';document.getElementById('section1').style ='';"> Next </button>

但是这不起作用。发生的情况是，通过单击按钮，我会转到第 2 节的简短部分，然后将我带回到第 1 节。任何有关如何解决此问题的帮助。

Answer 1

很少有东西遗漏了，还有一些没有被理解。

你需要集中注意力。与focus()；所以它会带你去那里。

如果您的元素没有class attribute，您将无法更改className。您需要先创建它或在html中将其留空。

要通过 javascript 更改样式，您需要调用规则，然后给它一个值。 element.style.paddingTop='49px';

要将焦点设置在表单元素或链接以外的其他内容上，您可以将属性tabindex="0" 添加到要捕获焦点状态的元素。

对您的代码进行一些更改，以便您可以试验我所说的一些事情。 http://codepen.io/gcyrillus/pen/pCikI

祝你学习成功:)