我有反应标签代码工作完美,但我需要改变html结构,以匹配下面的一个。是否有可能在<a>
标记后带来选项卡内容以维持我的html结构?
<div className="sports-tab-container">
<ul>
<li role="presentation" className="sports-setup-ico first-time-active ft-active-tab">
<a href="javascript:;" className="sports-tab-header">
<h2>sports player</h2>
<p className="sports-subtitle">Days 1 and 2</p>
</a>
<div className="sports-tab-content">
<p className="sports-large-text ft-day1 ft-day2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry</p>
</div>
</li>
<li role="presentation" className="sports-invest-ico">
<a href="javascript:;" className="sports-tab-header">
<h2>car selling</h2>
<p className="sports-subtitle">Approx. Day 3</p>
</a>
<div className="sports-tab-content">
<p className="sports-large-text ft-day1 ft-day2">It is a long established fact that a reader will be distracted by the readable content of a page when </p>
</div>
</li>
</ul>
</div>
只需改变一个小的CSS样式:
活动链接
Make: display: Block to inline-block
.tabs__labels li {
display: inline-block;
}