2016-09-16 6 views
1

私はトグルボタンを持っています。その中にhrefリンクを追加したいので、トグルボタンを左にしてリンクを開く必要があります。逆の場合も同様です。トグルボタンにhrefリンクを追加する方法は?

これまでのところ私ですコード::すべてのヘルプをいただければ幸いです

<html> 
<head> 
<style> 
.switch { 
position: fixed; 
display: block; 
width: 65px; 
height: 34px; 
top: 34px; 
left: 42.5%; 
z-index:2; 
} 

.switch input {display:none;} 
.slider { 
position: absolute; 


cursor: pointer; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #3498DB; 
    -webkit-transition: .4s; 
    -moz-transition: .4s; 
    -o-transition: .4s; 
    -ms-transition: .4s; 
    transition: .4s; 
} 

.slider:before { 
    position: absolute; 
    content: ""; 
    height: 26px; 
    width: 26px; 
    left: 6px; 
    bottom: 4px; 
    background-color: white; 
    -webkit-transition: .4s; 
    -moz-transition: .4s; 
     -o-transition: .4s; 
     -ms-transition: .4s; 
    transition: .4s; 
} 

input:checked + .slider { 
    background-color: #3498DB; 
} 

input:focus + .slider { 
    box-shadow: 0 0 1px #3498DB; 
} 

input:checked + .slider:before { 
    -webkit-transform: translateX(26px); 
    -ms-transform: translateX(26px); 
    -moz-transform: translateX(26px); 
    -o-transform: translateX(26px); 
    transform: translateX(26px); 
} 

/* Rounded sliders */ 
.slider.round { 
    border-radius: 34px; 
} 

.slider.round:before { 
    border-radius: 60%; 
} 
</style> 
</head> 
<body> 
<label class="switch"> 
    <input type="checkbox"> 
     <div class="slider round"></div> 
</label> 
</body> 
</html> 

..

答えて

0

私は、CSSの専門家ではないです。 javascriptでは、このようなソリューションを提供することができます。クリック時にイベントをバインドすることができます。 onclick関数では、そのユニークなクラスがあるかどうかをチェックすることで、左から右を簡単に識別できるようになります。

<input type="checkbox" onclick="loadNewPage();"> 

javascriptの機能は次のとおりです。要素IDとクラス名を変更する必要があります。 CSSソリューションの

function loadNewPage() 
{ 
    //FOR THIS SOLUTION YOU NEED TO HAVE A UNIQUE CLASS OR CLASS COMBINATION TO IDENTIFY COMBINATION 
    if($('#ELEMENT_ID').hasClass("SPECIFIC_CLASS_NAME")){ 
     window.location.replace('/admin-check/customer/customerData'); 
    } 
} 

この通過してくださいSO

Make a div into a link

a href link for entire div in HTML/CSS

に答えます
関連する問題