jQuery-在按钮外单击时保持对按钮的关注

Wajahat 发表于 Dev

Wajahat

因此，我已经能够创建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>

基肖尔·萨哈斯拉那曼（Kishore Sahasranaman）

使用$(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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。