Question

有人可以解释/帮助我如何实现以下目标吗？

我正在尝试在html/css or java中创建一个开/关按钮，但我刚刚完成了一个html/css课程并且迷失了这个东西。

我想要的是那个按钮跟随两个hrefs（一个用于'on'而一个用于'off'）

此按钮基本上是一个记录器按钮，在开启状态下，它通过卷曲启动记录，在关闭状态下，它会停止卷曲。

我希望拥有/创建一个类似于online button generator

的按钮

但我无法弄清楚如何在开启和关闭状态下添加链接。

非常感谢任何帮助。

Answer 1

这是切换href属性的小功能。我为你建了一个小fiddle。如果你想要的东西让我知道，我将帮助你建立你在问题中提到的完全相同的按钮。

干杯

Answer 2

你可以使用jQuery mobile而不是那个，见下文

// here is HTML
<div data-role="page" id="home">
    <div data-role="content">
       <label for="flipSwitch">Flip toggle switch:</label>
       <select name="flipSwitch" id="flipSwitch" data-role="slider">
          <option value="off">Off</option>
          <option value="on">On</option>
       </select>                  
    </div>
</div>

// you can easily get on/off events and use whatever you want
$("#flipSwitch").on("change",function(){
    var switch = $(this).val();
    if(switch == "on"){        
    }else{
    }   
});

jQuery mobile link

小提琴here

Answer 3

这对你有帮助吗？这是Fiddle

<强> HTML

<button id="switch" class="on" data-on="http://google.com" data-off="http://yahoo.com"></button>

<强> CSS

#switch {
  width: 60px;
  height: 60px;
  border: none;
  outline: none;
  border-radius: 50%;
  cursor: pointer;
}
.on {
  background: url(on.png) no-repeat;
}
.off {
  background: url(off.png) no-repeat;
}

<强>的jQuery

$(function() {

  $('#switch').wrap('<a href="http://google.com"></a>');        

  $('#switch').click(function() {

    var dataOn  = $(this).attr("data-on"),
        dataOff = $(this).attr("data-off");

      if($(this).hasClass('on')) {
        $(this).removeClass('on').addClass('off').wrap('<a href="' + dataOff + '"></a>');

      }
      else if($(this).hasClass('off')) {
        $(this).removeClass('off').addClass('on').wrap('<a href="' + dataOn + '"></a>');
      }

  });

});

Answer 4

再次感谢那些帮助过我的人。

从我这边快速抬头：

我暂时放弃了样式，只是寻找功能性解决方案并以这种方式找到它：

    <select id="selectbox1" name="2" onchange="javascript:location.href = this.value;" target="button">
    <option value="/control/record/stop?app=live2&name=test" selected target="button1">Stop recorder</option>
    <option value="/control/record/start?app=live2&name=test" target="button1">Start recorder</option>
    </select>

现在这很好用。我唯一想到的是我如何设置target =“”指向iframe。但它不适用于标签。

是否有人知道如何解决这个问题？

HTML CSS开/关按钮还是刻录机开关？

4 个答案: