如何将href链接添加到切换按钮？

我有一个切换按钮，其中我想A 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>

任何帮助将不胜感激..

来源

2016-09-16 harishk

我不是一个CSS专家。在JavaScript中，我们可以给你一个像这样的解决方案。您可以绑定一个点击事件。在onclick函数中，您可以检查是否有这个独特的类将帮助您轻松识别左边的权利。

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

javascript函数是这样的。您需要更改元素ID和类名称。

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'); 
    } 
}

对于CSS解决方案，请通过这个SO回答

Make a div into a link

a href link for entire div in HTML/CSS

来源

2016-09-17 02:01:19 Sanka

如何将href链接添加到切换按钮？

回答

相关问题