我有反应标签代码工作完美，但我需要改变html结构

I have react tabs code working perfectly but I need to change the html structure

本文关键字：改变 结构 html 有反应 标签 代码 工作 完美      更新时间：2023-09-26

我有反应标签代码工作完美，但我需要改变html结构，以匹配下面的一个。是否有可能在<a>标记后带来选项卡内容以维持我的html结构?

https://jsfiddle.net/9e767txs/9/

<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;
}
相关文章：