2013-07-23 65 views
0

我刚刚为使用jQuery UI的2个选项卡创建了一个简单容器,现在我要做的就是删除出现在其下的边框。我已经多次尝试使用类似问题的信息,但仍然没有任何结果。这里是正在使用的代码:jQuery-ui删除底部边框

<script> 
$(function() { 
    $("#Tabs").tabs(); 
}); 
</script> 

<div class="Tabs" id="Tabs"> 
    <ul> 
     <li><a href="#Tabs-1">Background</a></li> 
     <li><a href="#Tabs-2">Contact Info</a></li> 
     <li><a href="#Tabs-3">Photos</a></li> 
    </ul> 
    <div class="tabContent"> 

     <div id="Tabs-1"> 
      Some content 
     </div> 

     <div id="bgTabs-2"> 
      Some content 
     </div> 

    </div> 
</div> 

而CSS使用:

div.Tabs { 
height: auto; 
width: 625px; 
font-size: 18px; 
font-weight: bold; 

} 

.Tabs ul { 
margin: 0px; 
padding: 0px; 
list-style-type: none; 
cursor: pointer; 
} 

.Tabs ul li { 
    position: relative; 
    display: inline; 
    text-align: center; 
} 

    .Tabs ul li a { 
     padding: 0px 15px; 
     text-decoration: none; 
     text-decoration-color: black; 
     text-decoration-style: none; 
     border-bottom:none; 
    } 

即使是“底部边框:无”行,我不断收到一个边界。无论我放在哪里。 我甚至试过 .ui-widget-content {0} {0} {0}} border:none; }

同样,我确实搜索过这个网站,但我想通过这种最简单的形式询问它,这个代码应该有助于未来的参考。

回答

-1

我认为你的问题将通过使用border:0;而不是border:none;来解决。
尝试使用这样的事情:

.ui-widget-content { 
    border-bottom:0; 
} 

或像这样:

.ui-widget-content { 
    border:0; 
} 

Working Example

+0

这会影响UI的小部件内容中的所有对象。不能接受的。 – catbadger