URL含matrix时切换标签后首标签display:block未清除问题求助

需求：JSP开发中，当URL包含"matrix"时，页面默认激活第三个标签而非第一个。当前URL：http://localhost:9080/ccsLab/myLab#matrix

现有代码 #

JSP代码 #

<div class="reportTabs actcontentz">
<ul class="nav nav-tabs" id="tab-values">
<li id="lab1" class="active"><a data-toggle="tab" href="#lab1">
<spring:message code="label.lab1" /></a></li>
<li id="lab2"><a data-toggle="tab" style="white-space: nowrap;" href="#lab2">
<spring:message code="label.lab2" /></a></li>
<li id="lab3"><a data-toggle="tab" style="white-space: nowrap;" href="#lab3">
<spring:message code="label.lab3" /></a></li>
</ul>
</div>

 <div class="tab-content">
 <div id="lab1" class="tab-pane active">
 <p> Inside lab 1 </p>
 </div>
 <div id="lab2" class="tab-pane fade">
 <p> Inside lab 2 </p>
 </div>
 <div id="lab3" class="tab-pane fade">
 <p> Inside lab 3 </p>
 </div>
 </div>

页面加载时尝试的JS代码 #

$(document).ready(function() {
    if(window.location.href.indexOf("matrix") > -1) { 
    $('ul.nav-tabs li').removeClass('active');
    $('.tab-pane').removeClass('active').addClass('fade');

    $('ul.nav-tabs li').eq(2).addClass('active');
    $('.tab-pane').eq(2).addClass('active').removeClass('fade');
    } 
})

尝试修复的JS代码（无效） #

$('.tab-pane').attr("style", "display: none !important");

相关CSS代码 #

.actcontentz ul.nav-tabs li{
    top: 1px;
    border-top: 1px solid #d6e9c6;
    border-left: 1px solid #d6e9c6;
    border-right: 1px solid #d6e9c6;
}

.actcontentz ul.nav-tabs li a{ 
    background-color: #fff !important;
    color: #333 !important;
    border: none;
    margin-right:0px !important;
    border-radius:0px !important;
}

.actcontentz ul.nav-tabs li a span, .2actcontent button span{
    margin-right: 5px ;
}

.actcontentz ul.nav-tabs li.active a{
    background-color: rgba(152, 199, 232, 1) !important;
    color: #fff !important;
    border-bottom: 1px solid #fff;
     margin-right:0px !important;
     font-weight: bold;
    font-family: candara;
}
.actcontentz ul.nav-tabs li.active{
    background-color: rgba(152, 199, 232, 1);
    color: #fff !important;
    width: 140px !important;
    text-align: center !important;
    margin-right:2px !important;
    top: 1px !important;
}

遇到的问题 #

执行上述JS后，第三个标签能成功激活并显示内容，但第一个标签的内容仍占据页面顶部空间，导致页面出现大量空白，第三个标签内容被挤至底部。调试发现第一个标签的display属性被设为block，尝试用JS强制设置display: none !important，但样式属性未改变。此外，上述CSS对除第一个标签外的所有标签均生效，请问是什么原因阻止新CSS应用到第一个标签？

内容的提问来源于stack exchange，提问作者Nandha Kumar Gandhi