jquery - 如何在 css 选项卡中为 onclick 添加边框

Question

在教程的帮助下，我有带有 jquery 淡入效果的 css 选项卡 here .我希望 css 看起来像 this http://img.ctrlv.in.s3.amazonaws.com/img/518e3d3e07928.jpg

Here's到目前为止我已经到达的地方。但是一旦单击选项卡，选项卡的边框就会消失，我尝试应用 border-top:solid 1px #ddd;，但它的行为就好像没有这样的代码.谁能帮帮我。

Answer 1

你的问题在这里:

    #tabs #current a{

   background:#f8f8f8;
    height:60px;
    position:relative;
    top:-4px;
    padding-top:4px;
    border-left-width:1px;
    color:#111;
    -webkit-border-radius:3px 3px 3px 3px;
    -moz-border-radius:3px 3px 3px 3px;
    border-radius:3px 3px 3px 3px;
    margin:0 0 0 -1px;
    z-index:46;
border:solid 1px #ddd;}

首先，确保您的 border: 属性具有样式、厚度和颜色。你的 css 中的一些边框没有；t​​。

其次，您的问题是您使用#tabs #current a 作为您的选择器。我认为您打算使用#tabs #current li。

顶部“按钮”或“选项卡”的容器是一个 li 元素。您在 li 元素内有一个链接，但为其添加边框无济于事，因为您实际上是在选项卡内添加边框。

tabs li 会影响处于“未激活”状态的选项卡。当前 li 选项卡影响当前处于焦点的选项卡。

如果您想为焦点链接(在本例中为选项卡的文本)添加文本装饰/样式，您可以使用#tabs #current a。此开关解决了您的边界问题，但我不确定它是否可以帮助您实现元素的最终目标。除了内容的变化，用户现在无法确定哪个是事件选项卡。

干杯!