如何为阴影效果切换选项卡z-index？

Question

我对很多这些内容感到陌生并使用Foundation 5建立了一个网站。我的照片描述了我想要做的事情。我有3个带阴影的标签，我会根据点击的标签丢失阴影。我不确定这是否可以通过CSS或js/jquery实现。我可以根据当前打开的选项卡重新排列选项卡的z-index吗？

就是这样;

HTML

<ul class="tabs" data-tab data-options="deep_linking: true" scroll_to_content:"false">
    <li class="tab-title title1"><a href="#panel2-1">Tab 1</a></li>
    <li class="tab-title title2"><a href="#panel2-2">Tab 2</a></li> 
    <li class="tab-title title3"><a href="#panel2-3">Tab 3</a></li>
</ul>          

 <div class="tabs-content"> 
    <div class="content active" id="panel2-1">
----stuff in this tab------</div>


<div class="content" id="panel2-2">
----stuff in this tab------</div>

<div class="content" id="panel2-3">
 ----stuff in this tab------</div>

div#all_tabs .tabs a{
min-width: 198px;
text-align: center;
border-radius: 4px 4px 0 0;
box-shadow:9px 0px 0px 0px #000000;
position: relative;

}

.tab-title.active{
  z-index: 98;
  position: relative;
}
.tab-title1{
  z-index: 1;
  position: relative;
}

.title2{
  z-index: 5;
  position: relative;
}

.title3{
  z-index: 3;
  position: relative;
}

div#all_tabs .tabs-content{
background-color: #fff;
border-radius: 4px 4px 0 0;
max-width: 952px;
min-height: 883px;
padding-top: 50px;
box-shadow:9px 0px 0px 0px #000000;
}