jQuery-在按鈕外單擊時保持對按鈕的關注

Question

因此，我已經能夠創建2個按鈕。 此處： http ： //jsfiddle.net/0y940r11/2/

我真的不知道如何在單擊按鈕外的某個位置后將焦點保持在單擊的按鈕上。

有人可以指出我的方向嗎？

 $(document).ready(function() { $(".button-off").on("click", function() { $(".corner-off").show(); $(".corner-on").hide(); }); $(".button-on").on("click", function() { $(".corner-on").show(); $(".corner-off").hide(); }); }); 

 .button-on, .button-off { border: 1px solid #ccc; height: 120px; width: 160px; position: relative; background: white; border-radius: 8%; } .button-on:active, .button-on:focus, .button-off:active, .button-off:focus { border: 4px solid #FFCC00; } .active { border: 4px solid #FFCC00; } button:active, button:focus { outline: 0; } .corner-off, .corner-on { width: 0px; height: 0px; border-bottom: 30px solid transparent; border-left: 30px solid #FFCC00; position: absolute; top: 0; left: 0; } .tick:after { content: "\\2713"; position: absolute; top: -1px; left: 5px; color: white; } 

 <button class="button-on"> <div class="corner-on" style="display:none"></div> <span class="tick"></span> ON </button> <button class="button-off"> <span class="corner-off" style="display:none"></span> <span class="tick"></span> OFF </button> 

Answer 1

使用$(document).on("click"和focus()實現此目的

 var lastClickedButton = $(".button-on")[0]; $(document).ready(function () { $(".button-off").on("click", function () { lastClickedButton = this; $(".corner-off").show(); $(".corner-on").hide(); }); $(".button-on").on("click", function () { lastClickedButton = this; $(".corner-on").show(); $(".corner-off").hide(); }); }); $(document).on("click", function (e) {$(lastClickedButton).focus();}); 

  .button-on, .button-off { border: 1px solid #ccc; height: 120px; width: 160px; position: relative; background: white; border-radius: 8%; } .button-on:active, .button-on:focus, .button-off:active, .button-off:focus { border: 4px solid #FFCC00; } .active { border: 4px solid #FFCC00; } button:active, button:focus { outline:0; } .corner-off, .corner-on { width: 0px; height: 0px; border-bottom: 30px solid transparent; border-left: 30px solid #FFCC00; position: absolute; top: 0; left: 0; } .tick:after { content:"\\2713"; position: absolute; top: -1px; left: 5px; color: white; } 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="button-on"> <div class="corner-on" style="display:none"></div> <span class="tick"></span> ON</button> <button class="button-off"> <span class="corner-off" style="display:none"></span> <span class="tick"></span> OFF</button> 

演示： http : //jsfiddle.net/kishoresahas/0y940r11/4/