javascript - 将边框隐藏在透明选项卡后面

Question

我正在尝试一个选项卡脚本，该脚本将根据您将鼠标悬停在哪个选项卡上而显示不同的信息。我试图在选项卡和主内容窗口上使用透明背景色来实现此目的。选项卡的右边框被隐藏，这很好，但通过透明背景可以看到主要内容的边框。我希望图形从选项卡流向内容，但我不知道如何隐藏“事件”选项卡右侧位置的边框。我创建了一个 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