Question

我正在尝试一个标签脚本，根据您悬停在哪个标签上显示不同的信息。我试图在选项卡和主要内容窗口上使用透明背景颜色执行此操作。选项卡的右边框是隐藏的，这很好，但主要内容的边框可以透过透明背景看到。我希望图形从选项卡流到内容但我无法弄清楚如何在ACTIVE选项卡右侧的位置隐藏边框。我已经创建了一个JSFiddle页面来提供可视化。

Tab Example - via JSFiddle

HTML：

<div id="vtab">
                <ul>
                    <li class="home selected"></li>
                    <li class="login"></li>
                    <li class="support"></li>
                </ul>
                <div>
                   <h1>Profile 1</h1>
                   <p>This is where profile 1 will go</p>
                </div>
                <div>
                    <h1>Profile 2</h1>
                   <p>This is where profile 2 will go</p>
                </div>
                <div>
                   <h1>Profile 3</h1>
                   <p>This is where profile 3 will go</p>
                </div>
            </div>

CSS：

body {
        background: black;
        font-family: verdana;
        padding-top: 50px;
        color: white;
    }
    #vtab {
        margin: auto;
        width: 900px;
        height: 100%;

    }
    #vtab > ul > li {
        width: 440px;
        height: 90px;
        background-color: rgba(23,23,23,.5) !important;
        list-style-type: none;
        display: block;
        text-align: center;
        margin: auto;
        padding-bottom: 10px;
        border: 2px solid #a9a9a9;
        border-radius: 15px 0 0 15px;
        border-collapse: collapse;
        position: relative;
        border-right: none;
        opacity: .3;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);             
    }

    #vtab > ul > li.selected {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
        border: 2px solid #a9a9a9;
        border-right: none;
        z-index: 10;
        background-color: rgba(23,23,23,.5) !important;
        position: relative;
    }
    #vtab > ul {
        float: left;
        width: 440px;
        text-align: left;
        display: block;
        margin: auto 0;
        padding: 0;
        position: relative;
        top: 80px;
    }
    #vtab > div {
        background-color: rgba(23,23,23,.5);
        margin-left: 440px;
        border: 2px solid #a9a9a9;
        min-height: 500px;
        padding: 12px;
        position: relative;
        z-index: 9;
        -moz-border-radius: 20px; 
    }

使用Javascript：

$(function() {
        var $items = $('#vtab>ul>li');
        $items.mouseover(function() {
            $items.removeClass('selected');
            $(this).addClass('selected');

            var index = $items.index($(this));
            $('#vtab>div').hide().eq(index).show();
        }).eq(1).mouseover();
    });

Answer 1

你可以在选定的li

周围的伪元素中绘制边框

CSS

.selected:before {
     content: '';
     position: absolute;
     right: 0px;
     bottom: 100%; 
     width: 0px;
     border-right: 2px solid #a9a9a9;
     height: 1000px;
     display: block;
}
.selected:after {
     content: '';
     position: absolute;
     right: 0px;
     top: 100%; 
     width: 0px;
     border-right: 2px solid #a9a9a9;
     height: 1000px;
     display: block;
}

这绘制了伪元素。剩下的就是剪辑它们（因为我们不知道所需的尺寸：

    #vtab {
        margin: auto;
        width: 900px;
        height: 100%;
        overflow: hidden;
    }

然后停止在主div中绘制边框：

#vtab > div {
    background-color: rgba(23,23,23,.5);
    border-style: solid;
    border-color: #a9a9a9;
    border-width: 2px 2px 2px 0px;
}

updated fiddle

no backgrounds fiddle

Answer 2

您无法移除/隐藏边框的一部分。您可以做的是让您的标签与边框重叠，但由于您的标签是透明的，您仍然会看到内容的边框。

但是，您可以将所选标签设置为与背景颜色相同的颜色。

body, #vtab > ul > li.selected {
    background: black !important;
}

JSFIDDLE

Answer 3

我使用了这里描述的方法：

http://foolproof.me/post/21647970230/transparent-tabs

这个想法是直接在选项卡上创建所有边框，甚至是底部边框。底部宽度为999em，溢出用于父元素以控制可见部分。

从该页面的文章：

我们假设你有以下HTML

<ul class="tabs">
  <li><a class="tab" href="#">Tab 1</a></li>
  <li><a class="active tab" href="#">Tab 2</a></li>
  <li><a class="tab" href="#">Tab 3</a></li>
  <li><a class="tab" href="#">Tab 4</a></li>
</ul>

创建标签外观：

.tabs {
   list-style: none;
   padding: 0;
   overflow: hidden;
}
.tab {
   display: block;
   float: left;
   padding: 10px;
}

活动标签和边框的CSS：

.tab.active {
  border: 2px solid rgba(0,0,0,.2);
  border-bottom: none;
  border-radius: 4px 4px 0px 0px;
  position: relative;
}

带有间隙的底部边框：

.tab.active::after,
.tab.active::before {
  display: block;
  content: '';
  position: absolute;
  bottom: 0px;
  height: 0px;
  width: 999em;
  border-bottom: 2px solid rgba(0,0,0,.2);
  pointer-events: none;
}
.tab.active::before {
  right: 100%;
  margin-right: 2px;
}
.tab.active::after {
  left: 100%;
  margin-left: 2px;
}

隐藏透明标签后面的边框

3 个答案:

updated fiddle