javascript - 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/