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

以下是使用 jQuery 实现的代码：

$(document).ready(function() {
  var activeRect = null;
  
  $('rect').on('mousedown', function() {
    if (activeRect) {
      activeRect.removeClass('active');
    }
    activeRect = $(this);
    activeRect.addClass('active');
    activeRect.css('border-color', 'red');
  });
  
  $('svg').on('click', function() {
    if (activeRect) {
      activeRect.removeClass('active');
      activeRect.css('border-color', 'black');
      activeRect = null;
    }
  });
});

这段代码假设 SVG 中包含一个或多个矩形元素，每个矩形都可以被点击并成为活动矩形。当某个矩形被点击时，它将被标记为活动矩形，并且它将被添加一个“active”类，同时边框颜色将被设置为红色。如果之前有活动矩形，它将被标记为非活动矩形（即删除“active”类），并且边框颜色将被还原为黑色。如果单击了 SVG 元素本身，则会重置活动矩形。

相关问题

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`，从而重置活动属性。

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

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

以下是一个简单的示例代码，可以实现您的需求：

HTML：

<div class="parent">
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
</div>

CSS：

.parent {
  width: 400px;
  height: 400px;
  border: 1px solid black;
  position: relative;
}

.rectangle {
  width: 50px;
  height: 50px;
  background-color: red;
  border: 1px solid black;
  position: absolute;
}

.active {
  border-color: blue;
}

JavaScript：

$(function() {
  $(".rectangle").draggable({
    containment: "parent",
    start: function() {
      $(this).addClass("active").siblings().removeClass("active");
    }
  });
  
  $(".parent").click(function() {
    $(".rectangle").removeClass("active");
  });
});

以上代码中，我们使用了 jQuery UI 的 Draggable 属性来实现矩形的拖动，并使用了 addClass 和 removeClass 方法来切换矩形的活动状态。当用户单击父区域时，我们使用 removeClass 方法来重置活动属性。