アクティブなタブは、CSSを使用して非アクティブなタブを指していますか？

CSSを使用して、タブをクリックすると（下の図に示すように）、タブが非アクティブなタブを指すようにする方法はありますか？アクティブなタブは、CSSを使用して非アクティブなタブを指していますか？

緑色のタブ1（下の図）がタブ2と3を指し、タブ2をクリックするとタブ3を指し示すようにしようとしています。ただし、タブ3の場合、長方形（矢印なし）のままです。

私は様々なスタックオーバーフロースニペットをうまくいきましたが、矢印をタブの上または下に置くことはできましたが、アクティブなタブの横にある非アクティブなタブをオーバーラップさせることはできません。

これは私のHTMLの基本的な構造です：CSSに関しては

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

、私はこの1つのようなスニペットを使用してきた：https://codepen.io/mimoYmima/pen/MwzQym

問題私が実行してきたがそれは、タブが左に浮かんでいるので、アクティブなタブの矢印を他のタブと重複させることはできません。

出典

2017-08-01 Chris Beaman

重複があなたの最後の問題です。 **保存勾配**はここで最悪の問題です。あなたはそのcodepenの例から何かを作ろうとしましたか？ –

また、 "タブ2"を選択したときの* "ダイアグラム" *はどのように見えますか？ –

ありがとうございます。私のダイアグラムでは、「タブ2」をクリックすると、「タブ1」と同じ角度のアクティブなタブが採用されます。しかし、その後、 "タブ3"の場合は、どこにでもポイントを置くのではなく、ただ緑色にします。今はグラデーションを気にする必要はありません。これは、タブ付きの外観を示すためのPhotoshopの素早い仕事でした。 –

-1

あなたは矢印divをフロートする必要はありません。

あなたがリンクしたcodepenをフォークし、CSSを編集して共有したグラフィックにエフェクトを作成しました。

https://codepen.io/sigil/pen/YxWZGa

<!-- language: lang-css --> 
/* Button-arrow CSS: */ 
.arrow { 
    cursor: pointer; 
    display: inline-block; 
    height: 40px; 
    position: relative; 
    line-height: 2.5em; 
    padding-left: 2em; 
    padding-right: 2em; 
    background: white; 
    color: black; 
    border: 1px solid #eee; 
} 
.arrow:after { 
    border-left: 20px solid white; 
} 
.arrow.active { 
    background-color: yellow; 
} 
.arrow.active, 
.arrow.active:after { 
    z-index: 50; 
    border-left: 20px solid yellow; 
} 
.arrow.active:after { 
    content: ""; 
    position: absolute; 
    border-bottom: 20px solid transparent; 
    border-top: 20px solid transparent; 
    height: 0px; 
    width: 0px; 
    margin-right: -20px; 
    right: 0; 
} 
.arrow:hover, 
.arrow:active { 
    background: yellow; 
    color: black; 
} 
.arrow:hover:after, 
.arrow:active:after { 
    border-left: 20px solid yellow; 
} 

/* General styles to set a baseline 'look' - not related to the button-arrow CSS above */ 
body, html { 
    font-family: helvetica; 
    background: #333; 
    color: #CCC; 
} 
.content { 
    text-align: center; 
    margin: 0 auto; 
} 

a:visited, a:link { 
    color: #F93; 
} 
<!-- language: lang-html --> 

<html> 
<body> 
    <div class="content"> 
    <p>Button with an arrow on the right. Just uses an anchor tag and css, so you can use it with your existing buttons easily by just adding the class of "arrow"! Also includes a hover state.</p> 

    <a class="arrow active">Arrow</a><a class="arrow">Arrow</a><a class="arrow">Arrow</a> 
    </div> 
</body> 
</html> 

<!-- end snippet -->

出典

2017-08-01 22:35:01 sigil

このソリューションは私にとって最も効果的なソリューションです。助けてくれてありがとう@sigil！ –

あなたが大歓迎です、喜んで助けました。私は他の人たちによっても恥を受けました。： – sigil

あなたはアクティブなタブの矢印のように絶対位置と擬似要素を活用することができます：ここに私の編集されたバージョンです。リストアイテムに「アクティブな」タブが指定されていない限り、このタブは非表示になります。元のHTMLマークアップは変更されません。

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
html { 
 
    font-family: sans-serif; 
 
} 
 
body { 
 
    display: flex; 
 
} 
 
ul { 
 
    margin: auto; 
 
    padding: 0; 
 
    display: inline-block; 
 
    list-style-type: none; 
 
    overflow: hidden; 
 
    background-color: #eee; 
 
    background-image: linear-gradient(#fff, #ddd); 
 
    border-radius: 1rem; 
 
    border: 1px #888 solid; 
 
    font-weight: bold; 
 
} 
 
li { 
 
    float: left; 
 
    padding: 1.5rem 4rem; 
 
    border-right: 1px #aaa solid; 
 
    position: relative; 
 
} 
 
li:last-child { 
 
    border: none; 
 
} 
 
a { 
 
    text-decoration: none; 
 
    color: #000; 
 
} 
 
.active { 
 
    background-color: #0b0; 
 
    background-image: linear-gradient(#0b0, #090); 
 
} 
 
li.active::after { 
 
    content:''; 
 
    width: 3rem; 
 
    height: 3rem; 
 
    background-color: #eee; 
 
    position: absolute; 
 
    border: none; 
 
    transform: scaleX(0.75) rotate(45deg) translate(-50%); 
 
    top: 50%; 
 
    right: -2.45rem; 
 
    margin-top: -0.45rem; 
 
    border-top: 1px #888 solid; 
 
    border-right: 1px #888 solid; 
 
    background-color: #0b0; 
 
    background-image: linear-gradient(130deg, #0b0, #090); 
 
    border-top-right-radius: 0.5rem; 
 
}

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

出典

2017-08-01 22:38:56 basement

ただ、三角形の境界線をシミュレートするために、アクティブなタブや他にpseudoelementを使用して三角形を追加します。デモ：

ul { 
 
    list-style-type: none; 
 
    display: flex; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul > li { 
 
    padding: 10px 40px; 
 
    font-weight: bold; 
 
    font-size: 24px; 
 
    height: 40px; 
 
    border: 1px solid #000; 
 
    border-right: none; 
 
    background: linear-gradient(to bottom, #fdfdfd, #828282); 
 
} 
 

 
ul > li.active { 
 
    background: #66d835; 
 
    position: relative; 
 
} 
 

 
ul > li.active:before, 
 
ul > li.active:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 100%; 
 
    top: 0; 
 
} 
 

 
/* triangle border for active tab */ 
 
ul > li.active:before { 
 
    transform: translateX(1px); 
 
    border: 30px solid transparent; 
 
    border-left-color: #000; 
 
    z-index: 1; 
 
} 
 

 
/* triangle for active tab */ 
 
ul > li.active:after { 
 
    /* border-width equal half of the height */ 
 
    border: 30px solid transparent; 
 
    border-left-color: #66d835; 
 
    z-index: 2; 
 
} 
 

 
/* border-radius for first tab */ 
 
ul > li:first-child { 
 
    border-top-left-radius: 5px; 
 
    border-bottom-left-radius: 5px; 
 
} 
 

 
/* border-radius for last tab but not active */ 
 
/* and right border */ 
 
ul > li:not(.active):last-child { 
 
    border-right: 1px solid #000; 
 
    border-top-right-radius: 5px; 
 
    border-bottom-right-radius: 5px; 
 
} 
 

 
ul > li > a { 
 
    height: 100%; 
 

 
    /* styles for text centering */ 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
ul > li > a, 
 
ul > li > a:hover, 
 
ul > li > a:active, 
 
ul > li > a:visited { 
 
    color: inherit; 
 
    text-decoration: none; 
 
}

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

出典

2017-08-02 10:32:30

アクティブなタブ内のグラデーションはどうですか？これはどのように実現しますか？ – basement

@basement OPのタスクや画像にグラデーションは表示されませんが、この場合はSVGまたは 'clip-path'を使用します。 –

アクティブな（緑色の）タブは、非アクティブなものと同じようにわずかに明るいから暗い勾配になっていますが、この方法では難しい面があります。 – basement

アクティブなタブは、CSSを使用して非アクティブなタブを指していますか？

答えて

関連する問題