2

カーソルを合わせたタブに応じて異なる情報を表示するタブ スクリプトを試しています。タブとメイン コンテンツ ウィンドウの透明な背景色でこれを実行しようとしています。タブの右側の境界線は非表示になっていますが、メイン コンテンツの境界線は透明な背景を通して見えます。グラフィックをタブからコンテンツに流したいのですが、ACTIVE タブの右側の場所で境界線を非表示にする方法がわかりません。ビジュアルを提供する 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 に答える