2

我正在试验一个选项卡脚本，该脚本将根据您悬停在哪个选项卡上显示不同的信息。我正在尝试使用选项卡和主内容窗口上的透明背景颜色来做到这一点。选项卡的右边框是隐藏的，这很好，但是可以通过透明背景看到主要内容的边框。我希望图形从选项卡流向内容，但我不知道如何将边框隐藏在活动选项卡右侧的位置。我创建了一个 JSFiddle 页面来提供视觉效果。

选项卡示例 - 通过 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();
    });
4

3 回答 3

2

您可以让它在所选 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;
}

更新的小提琴

没有背景小提琴

于 2013-11-04T22:21:10.020 回答
0

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

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

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

JSFIDDLE

于 2013-11-04T20:25:40.133 回答
0

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

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;
}
于 2015-06-19T20:04:39.127 回答