0

誰かが次のことをどのように達成できるかを説明/助けてもらえますか?;

eiter でオン/オフ ボタンを作成しようとしていますhtml/css or javaが、コースを修了したばかりhtml/cssで、このことに迷っています。

私が欲しいのは、そのボタンが2つのhrefs（「オン」用と「オフ」用）に従うことです

このボタンは基本的にレコーダー ボタンであり、オンの状態ではカールを介して記録を開始し、オフの状態ではカールを停止します。

このオンラインボタンジェネレーターに似たボタンを作成/作成したい

しかし、オンとオフの状態でリンクを追加する方法がわかりません。

どんな助けでも大歓迎です。

4

4 に答える 4

0

属性を切り替えるための小さな関数を次に示しhrefます。私はあなたのために小さなフィドルを作りました。お探しのものがあればお知らせください。質問で述べたのとまったく同じボタンを作成するお手伝いをします。

乾杯

于 2013-09-07T18:48:36.150 に答える
0

これは役に立ちますか? ここにフィドルがあります

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

  });

});
于 2013-09-07T18:55:53.953 に答える
0

それよりもjQueryモバイルを使用できます。以下を参照してください

// 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モバイルリンク

ここでフィドル

于 2013-09-07T18:50:16.637 に答える
0

助けてくれた人たちにもう一度感謝します。

私の側から簡単に注意してください：

今のところスタイリングをやめて、機能的な解決策を探したところ、次のように見つかりました。

    <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 を指すように設定する方法だけです。しかし、それはタグでは機能しません。

私がそれを解決する方法を知っている人はいますか？

于 2013-09-08T08:43:21.677 に答える