javascript jquery 该区域可以有一个活动矩形（另外用边框颜色突出显示，您可以在样式表中设置一个额外的类，例如， ）。 当鼠标光标在一个矩形上按下时，该块变为活动状态（它被分配给给定的类），而先前的活动矩形（如果有）变为非活动状态（该类被“删除”）。选择 如果用户单击共享区域，活动属性将从活动矩形中重置。编写代码

下面是一个用 jQuery 实现的示例代码，实现了您提出的功能：

HTML 代码：

<div id="rectangle-container">
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
</div>

CSS 代码：

.rectangle {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
}

.active {
  border-color: red;
}

JavaScript 代码：

$(document).ready(function() {
  var activeRectangle = null; // 初始化活动矩形为 null

  // 当鼠标按下时，将当前矩形设为活动矩形
  $('#rectangle-container').on('mousedown', '.rectangle', function() {
    if (activeRectangle) {
      activeRectangle.removeClass('active'); // 将先前的活动矩形设为非活动状态
    }
    $(this).addClass('active'); // 将当前矩形设为活动矩形
    activeRectangle = $(this);
  });

  // 当用户单击共享区域时，将活动属性从活动矩形中重置
  $('body').click(function(event) {
    if (!$(event.target).closest('#rectangle-container').length) {
      if (activeRectangle) {
        activeRectangle.removeClass('active');
        activeRectangle = null;
      }
    }
  });
});

代码解释：

1. 首先，我们在 HTML 中创建了一个包含若干个矩形的容器，每个矩形都有一个类名为 `rectangle`。我们还定义了一个边框颜色为红色的类名为 `active`，用于表示活动矩形。

2. 然后，我们在 jQuery 的 `ready` 函数中编写了代码，用于实现您提出的功能。

3. 首先，我们定义了一个变量 `activeRectangle`，用于存储当前的活动矩形。初始时，它被设为 `null`。

4. 然后，我们使用 jQuery 的 `on` 函数，为矩形容器绑定了一个 `mousedown` 事件，当鼠标按下时触发。我们使用 `event.target` 来获取当前被按下的矩形，并将其设为活动矩形。如果先前已经有活动矩形存在，我们需要将其设为非活动状态（即移除 `active` 类），然后将当前矩形设为活动矩形，并将其存储在 `activeRectangle` 变量中。

5. 最后，我们使用 jQuery 的 `click` 函数，为整个页面绑定了一个 `click` 事件。当用户单击页面上除矩形容器外的任何地方时，我们检查当前是否存在活动矩形。如果有，我们将其设为非活动状态，并将 `activeRectangle` 变量设为 `null`，从而重置活动属性。

希望这个示例能够帮助您理解如何实现您提出的功能。