以下是使用css flex属性创建制表符组件的方法。 我想切换标签及其包含'data-title'和'data-content'。 data-title = data-content时切换。 如何将动态数据填充到标签标题和标签内容。
请建议我该怎么做。
演示：网址：http://codepen.io/JEETPAL/pen/JKLyRA?editors=0010
这是HTML
<dl class="tabs">
<dt class="active" data-title="latest_news">LATEST NEWS</dt>
<dd data-content="latest_news">
<h3>Elephants stranded in canal, rescued after hour long operation
</h3>
<p>Forest officials rescued a herd of seven elephants, including two calves, after they were stranded in a canal for close to an hour in West Bengal's Jalpaiguri city.</p>
</dd>
<dt data-title="entertainment">ENTERTAINMENT</dt>
<dd data-content="entertainment">
<h3>Tiger Shroff nails 'A Flying Jatt' title track</h3>
<p>The title track of 'A Flying Jatt' seems to be a powerful answer to Tiger Shroff's critics who wrote off the newcomer. The catchy number is peppy, funny and every bit entertaining.
Featuring cute dancers dressed as mini Flying Jatts in blue, and several kids handpicked by director Remo D'souza himself for their dancing prowess including Flying Jatt's little 'possessive girlfriend,' the title song hints that the superhero flick can be an out and out laugh riot.</p>
</dd>
….
</dl>