tab切换时border的控制

• 效果图

• 问题: 如何实现中间两个border为单条
• 思路: 设置中间tab的左右border为none, 当选中tab2时, 经过css中兄弟选择器改变tab3的左border颜色; 经过js添加类名的方法控制tab1的右border颜色
• 代码以下:

// css
    .tabs {
        .tab {
            position: relative;
            padding: 30px 36px;
            box-sizing: border-box;
            display: inline-block;
            width: 320px;
            height: 246px;
            color: #707c93;
            border: 1px solid;
            border-image: svg(square param(--color #979797)) 1 stretch;
            border-bottom-color: #FF8200;
            cursor: pointer;
            &:nth-child(2) {
                border-left: none;
                border-right: none;
            }
            .recommend {
                position: absolute;
                top: 0;
                right: 0;
                width: 48px;
                height: 48px;
            }  
        }
        .firstTab {
            border-right-color: #FF8200;
        }
        .active {
            border-bottom: none;
            border-color: #ff8200;
            & + div {
                border-left-color: #ff8200;
            }
        } 
    }

// html
    <div className={styles.tabs}>
        {insCaseData.map((item, index) => (<div
            role='button'
            key={index}
            className={`${styles.tab} ${activeTab === index ? styles.active : ''} ${(activeTab === 1 && index === 0) ? styles.firstTab : ''}`}
            onClick = {() => {
                onTabChange(index); // 保存选中tab的索引
        }}
        >
            tab{index + 1}
        </div>))}
    </div>
    <div className={styles.insDetail}>
            内容{activeTab + 1}
    </div>
复制代码