在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

祝您学习成功:)