HTML CSS开/关按钮或记录器开关？答案

【问题标题】：HTML CSS on/off button or recorder switch?HTML CSS开/关按钮或记录器开关？
【发布时间】：2013-09-07 18:23:49
【问题描述】：

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

我正在尝试在eiter html/css or java 中制作一个开/关按钮，但我刚刚完成了html/css 课程并且迷失在这件事上。

我想要的是那个按钮遵循两个href（一个用于'on'，一个用于'off'）

这个按钮基本上是一个记录器按钮，在打开状态下它通过卷曲开始记录，在关闭状态下它停止卷曲。

最好我想拥有/创建一个类似online button generator的按钮

但我不知道如何在开启和关闭状态下添加链接。

任何帮助将不胜感激。

【问题讨论】：

你想让它用在触控设备上？？？
不，它基本上是一个简单的 html 页面，但我对这些按钮的外观相当满意，但我不确定我想要的生成器/代码是否可行。
看toggleClass

标签： javascript jquery html css curl

【解决方案1】：

这是一个切换href 属性的小函数。我为你建立了一个小的fiddle。如果那是您要查找的内容，请告诉我，我将帮助您构建与您在问题中提到的完全相同的按钮。

干杯

【讨论】：

感谢您的回复伙伴，请多多包涵，因为我不精通编码，刚刚完成了 html/css 课程并且刚开始使用 java 和 jquery。我将 html 部分添加到我的页面，但我不确定是否需要将该 java 保存在 *.js 文件中并使用
你可以在<script>和</script>标签之间添加js/jQuery代码。最佳位置就在</body> 标签之前。
@user2645886 对不起，您的意思是 JAVA 或 JAVASCRIPT 这些语言完全不同。但我想我们在谈论 javascript 因为你说的是 jQuery。对吗？或者简单地告诉我你想做什么，我会尽我所能提供帮助。干杯
我很抱歉让您感到困惑，我不确定自己说实话需要使用哪种语言，或者更确切地说：在这种情况下哪种语言最好。我正在寻找一个不错的录制按钮，基本上是一个打开/关闭开关，可以打开弹出窗口或目标 iframe。在关闭状态下它必须遵循：/control/record/stop?app=live4&name=test 在启动时它必须遵循：/control/record/start?app=live4&name=test
@user2645886 不用担心 :) 马特。让我们俩的生活更轻松。请你告诉我你在做什么或者你想编码什么？谢谢。

【解决方案2】：

这对你有帮助吗？这是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>');
      }

  });

});

【讨论】：

感谢您的帮助和代码。如果你不介意我已经得到了别人的帮助。抱歉耽误您的时间。

【解决方案3】：

再次感谢帮助过我的人。

从我这边快速提醒一下：

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

    <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。但它不适用于标签。

有人知道我该如何解决吗？

【讨论】：

【解决方案4】：

你可以使用 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 手机 link

小提琴here

【讨论】：

感谢您的帮助和代码。如果你不介意我已经得到了别人的帮助。抱歉耽误您的时间。