我有一個(gè)水平HTML選項(xiàng)卡，其中我希望隱藏所選選項(xiàng)卡的底部邊框。隱藏HTML中選定選項(xiàng)卡的底部邊框

這個(gè)問(wèn)題已經(jīng)被問(wèn)here和here

但這兩種解決方案都不能正常工作，因?yàn)槲沂褂靡粋€(gè)div結(jié)構(gòu)，沒(méi)有太大的JavaScript。

jQuery('.tab-links a').on('click', function(e) {

var currentAttrValue = jQuery(this).attr('href');

jQuery(currentAttrValue).show().siblings().hide(); //changed here

jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

e.preventDefault();

});

.tabs {

width: 90%;

margin: auto;

}

/*----- Tab Links -----*/

/* Clearfix */

.tab-links:after {

display: block;

clear: both;

content: '';

}

.tab-links {

margin: 0px;

}

.tab-links li {

margin: 0px 3px;

float: left;

list-style: none;

}

.tab-links a {

padding: 9px 15px;

display: inline-block;

border-radius: 3px 3px 0px 0px;

text-decoration: none;

font-size: 16px;

font-weight: 600;

color: #999;

transition: all linear 0.2s;

border: 1px solid #fff;

}

.tab-links a:hover {

text-decoration: none;

/*background: #f1f1f1;*/

/*border-bottom: 4px solid #999; */

}

li.active a,

li.active a:hover {

/* border-bottom: 4px solid #444; */

/*background: #ccc;*/

border: 1px solid #ccc;

border-bottom: 1px solid #fff;

color: #444;

}

/*----- Content of Tabs -----*/

.tab-content {

padding: 15px;

border-radius: 3px;

border: 1px solid #ccc;

background: #fff;

min-height: 300px;

z-index: -99;

}

.tab {

display: none;

min-height: 300px;

}

.tab.active {

display: block;

}

• PROFILE
• REVIEWS
• REWARDS

Videos and Screenshots

總結(jié)

以上是生活随笔為你收集整理的可隐藏选项卡html,隐藏HTML中选定选项卡的底部边框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。