创建标签元件开关

我想创建这样的，开关在那里我可以选择从两个创建标签元件开关

只有一个选择，我能做到这一点的，但不能弄清楚如何覆盖他们。。

<button>Курьер</button><button>Самовывоз</button>

CSS

button{ 
       margin-top: 15px; 
       width: 50%; 
       height: 25px; 
       border-radius: 20px; 
       border: none; 
       background: 
       linear-gradient(to right, #2BD563, #0183D3) no-repeat; 
       color:#fff; 
       .reg; 
       text-transform: uppercase; 
    }

人谁可以帮助吗？

在此先感谢！

来源

2017-08-15 Aralbay Issatayev

使用激活键的一类，并通过Javascript添加类。 – 2017-08-15 20:17:04

@AbdullahAlemadi如何互相叠加，一个应该在第二个“之上”。在我的情况下，他们看起来像在行。 –

aha我明白你想要什么。我会回答 – 2017-08-15 20:21:41

制作使用的div，有内部彩条一个div主div容器和2周以上的div文字：

let pos = 0; 
 
document.getElementById("container").onclick = function() { 
 
    if (pos == 0) 
 
    pos = 100; 
 
    else 
 
    pos = 0; 
 
    document.getElementById("colour").style.left = pos + "px"; 
 
}

#container { 
 
    position: absolute; 
 
    height: 30px; 
 
    width: 200px; 
 
    background: grey; 
 
    border-radius: 15px; 
 
} 
 

 
#colour { 
 
    position: absolute; 
 
    height: 30px; 
 
    width: 100px; 
 
    left: 0px; 
 
    background: green; 
 
    border-radius: 15px; 
 
    transition: left 0.2s; 
 
} 
 

 
#text1 { 
 
    position: absolute; 
 
    height: 30px; 
 
    width: 100px; 
 
    left: 0px; 
 
    text-align: center; 
 
} 
 

 
#text2 { 
 
    position: absolute; 
 
    height: 30px; 
 
    width: 100px; 
 
    right: 0px; 
 
    text-align: center; 
 
}

<div id="container"> 
 
    <div id="colour"></div> 
 
    <div id="text1">hello</div> 
 
    <div id="text2">goodbye</div> 
 
</div>

通过控制“左”属性你可以用它来制作动画，我加入了一些快速的JS，告诉你如何做到这一点。

来源

2017-08-15 20:35:29 Chuck

您可以使用一个checkbox在按钮之间切换。要将第一个按钮置于第二个按钮上，可以在第二个按钮上使用负数z-index。

.field { 
 
    position: relative; 
 
    display: inline-block; 
 
    padding: 2px; 
 
    margin: 0; 
 
} 
 

 
#check { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0; 
 
    top: 0; 
 
    opacity: 0; 
 
    z-index: 2; 
 
} 
 
button { 
 
    background: white; 
 
    border: 1px solid blue; 
 
    border-radius: 40px; 
 
    padding: 3px 35px; 
 
    transition: all 0.3s ease-in; 
 
} 
 
#check:checked ~ button:last-of-type, 
 
#check ~ button:first-of-type{ 
 
    background: blue; 
 
    color: white; 
 
} 
 
#check:checked ~ button:first-of-type { 
 
    background: white; 
 
    color: black; 
 
} 
 
button:last-of-type { 
 
    transform: translateX(-20px); 
 
    z-index: -1; 
 
}

<div class="field"> 
 
    <input type="checkbox" name="" id="check"> 
 
    <button>Курьер</button> 
 
    <button>Самовывоз</button> 
 
</div>

来源

2017-08-15 20:38:46

创建标签元件开关

回答

相关问题