标签<ul> <li> </li> </ul>中的动态删除边框

Question

我必须画线，这取决于标签的选择

。 看看我现在拥有的东西：

看看我需要做什么：

我的主要问题是我不知道如何使用

：active来动态删除边框。

请帮帮我。可能不只是css和html？一些javascript？

html代码：

  <div class="layout-vbox-panel-item padding-top" style="background: transparent;">
        <ul data-componentname="tabSet" data-role="tabset" class="k-reset k-tabset">
        <li class="k-tab k-active-tab" data-tabindex="0"><span class="k-item">Описание</span></li>
<li class="k-tab" data-tabindex="1"><span class="k-item">Обсуждение</span></li>
<li class="k-tab" data-tabindex="2"><span class="k-item">План</span></li>
<li class="k-tab" data-tabindex="3"><span class="k-item">Файлы</span></li>
<li class="k-tab" data-tabindex="4"><span class="k-item">История</span></li></ul>
    </div>

这里的css：

   .k-tabset {
display: block;
list-style-type: none;
line-height: 1.5;
overflow: none;
font-family: arial;
padding: 0px 3px;
white-space: nowrap;

css for li：

background-color: #F5F5F5;
border: 1px solid #C5C5C5;
border-bottom: 1px solid;
border-radius: 7px 7px 0 0;
color: rgb(192,192,192);
cursor: pointer;
display: inline-block;
font-weight: bolder;
list-style-type: none;
margin: 0 -1px 0 0;
position: relative;

for li：active

background-color: #fff;
z-index: 1;
border-bottom: 1px solid #fff;

Answer 1

设置

border:none 

在li:active

的css中

Answer 2

尝试

 li:active
{
 background-color: #fff;
  z-index: 1;
  border:none;//removed your border-bottom
}

Answer 3

如果您使用基于js的标签导航

，请尝试使用此小提琴http://jsfiddle.net/EXZax/

$(function(){
    $('ul.k-tabset').on('click','li.k-tab',function(){
        $('ul.k-tabset').find('li.k-active-tab').removeClass('k-active-tab');
        $(this).addClass('k-active-tab');
    });

});

如果您的标签正在重新加载页面。使用此

li.k-active-tab{
background-color: #fff;
z-index: 1;
border-bottom: 1px solid #fff;
}