使用CSS指向非活动选项卡的活动选项卡？

有没有办法，使用CSS，使其点击一个选项卡（如下图所示），选项卡“指向”非活动选项卡？使用CSS指向非活动选项卡的活动选项卡？

我试图让绿色选项卡1（在下图中）指向选项卡2和3，然后如果您单击选项卡2，它指向选项卡3.但是，当您单击选项卡3，它将保持矩形（没有箭头）。

我一直在尝试各种堆栈溢出片段，它能够成功地将箭头放在选项卡的上方或下方，但似乎没有工作与活动选项卡旁边的非活动选项卡重叠。

这是我的HTML的基本结构：

<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>

至于CSS的，我一直在使用的片段像这样的：https://codepen.io/mimoYmima/pen/MwzQym

的问题，我一直在运行进入似乎是，因为选项卡左侧浮动，我不能使活动选项卡的箭头重叠其他选项卡。

来源

2017-08-01 Chris Beaman

重叠是你的最后一个问题。 **保留渐变**是最糟糕的问题。你有没有试图从这个codepen例子中创造出一些东西？ –

另外...当选择“Tab2”时，你的*“图表”*看起来如何？ –

谢谢你们。根据我的图表，当我点击“标签2”时，它将采用与“标签1”相同的有角度的活动标签。但是对于“Tab 3”，我想它只是绿色的，而不是指向任何地方。现在不要想到渐变 - 这只是一个快速的Photoshop作业来说明标签的外观。 –

-1

你并不需要浮动箭头的div。

我已经分叉了您链接到的编码器并编辑了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'。 –

主动（绿色）选项卡与非主动选项一样，具有轻微的渐变效果，这是该方法的难点。我更喜欢一种方法，它可以更好地控制箭头和主tab1矩形的连续背景属性。 – basement

使用CSS指向非活动选项卡的活动选项卡？

回答

相关问题