如何制作滑动按钮?

时间:2019-01-11 13:58:09

标签: javascript jquery css

我想用滑动按钮替换下面的按钮。任何帮助将不胜感激。让它滑动有限的长度,最后触发函数调用。

// javascript part using stylesheet display feature to hide and display code 
   
var pressme = document.getElementById('pressme');
var button1=document.getElementById('myBtn');
var button2=document.getElementById('myBtn1');

var showme = document.getElementById('showme');
button1.addEventListener('click', display1
 // pressme.style.display = 'none';
 // showme.style.display = 'block';
);
button2.addEventListener('click', display2
 // pressme.style.display = 'none';
 // showme.style.display = 'block';
);
function display1(){
    pressme.style.display = 'none';
    showme.style.display = 'block';
    button1.style.display=  'none';
    button2.style.display=  'block';



}

function display2(){
    pressme.style.display = 'block';
    showme.style.display = 'none';
    button2.style.display=  'none';
    button1.style.display=  'block';



}
// javascript part using stylesheet display feature to hide and display code 
<!DOCTYPE html>
<html>
<head>
  <title>Realtime communication with WebRTC</title>
  <link rel="stylesheet" href="css/main.css" />
</head>
<body>


<table id="pressme" style="width:100%" bgcolor="red" height =500px>
        <button id="myBtn">Try it red</button>

    </table>


<table id="showme" style="width:100%;display:none;" bgcolor="green"height=500px>
        <button id="myBtn1" style=display:none; >Try it green </button>

</table>


</body>
</html>

0 个答案:

没有答案