創建標籤元件開關

我想創建這樣的，開關在那裏我可以選擇從兩個創建標籤元件開關

只有一個選擇，我能做到這一點的，但不能弄清楚如何覆蓋他們。。

<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

創建標籤元件開關

回答

相關問題