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>
複製代碼