如何写一个详情页的颜色和尺码同时选择的高亮状态

实现详情页中颜色和尺码的同时选择高亮状态，可以通过以下步骤实现：

1. 首先，设置一个变量来存储当前选中的颜色和尺码。例如，可以使用一个对象来存储当前选中的颜色和尺码，如{color: 'red', size: 'M'}。

2. 给颜色和尺码的选项添加点击事件，当用户点击一个选项时，更新选中的颜色和尺码，并将当前选中的选项进行高亮显示。

3. 在每个选项的点击事件中，判断当前选中的颜色和尺码是否匹配当前点击的选项，如果匹配则添加高亮显示的类名，否则移除高亮显示的类名。

4. 在更新选中的颜色和尺码后，判断当前选中的颜色和尺码是否都已经选择了，如果都已经选择，则可以进行其他操作，比如更新商品信息等。

下面是一个简单的实现示例：

HTML代码：

<div class="colors">
  <span class="color-option" data-color="red">红色</span>
  <span class="color-option" data-color="green">绿色</span>
  <span class="color-option" data-color="blue">蓝色</span>
</div>

<div class="sizes">
  <span class="size-option" data-size="S">S</span>
  <span class="size-option" data-size="M">M</span>
  <span class="size-option" data-size="L">L</span>
</div>

JavaScript代码：

// 当前选中的颜色和尺码
var selected = {
  color: null,
  size: null
};

// 给颜色选项添加点击事件
var colorOptions = document.querySelectorAll('.color-option');
for (var i = 0; i < colorOptions.length; i++) {
  colorOptions[i].addEventListener('click', function() {
    // 更新选中的颜色
    selected.color = this.getAttribute('data-color');
    // 高亮显示当前选中的颜色
    highlightSelectedOptions();
  });
}

// 给尺码选项添加点击事件
var sizeOptions = document.querySelectorAll('.size-option');
for (var i = 0; i < sizeOptions.length; i++) {
  sizeOptions[i].addEventListener('click', function() {
    // 更新选中的尺码
    selected.size = this.getAttribute('data-size');
    // 高亮显示当前选中的尺码
    highlightSelectedOptions();
  });
}

// 高亮显示当前选中的颜色和尺码
function highlightSelectedOptions() {
  // 移除所有选项的高亮显示类名
  var options = document.querySelectorAll('.color-option, .size-option');
  for (var i = 0; i < options.length; i++) {
    options[i].classList.remove('selected');
  }
  // 添加当前选中的颜色和尺码的高亮显示类名
  if (selected.color && selected.size) {
    var selectedOption = document.querySelector('.color-option[data-color="' + selected.color + '"]') ||
                         document.querySelector('.size-option[data-size="' + selected.size + '"]');
    if (selectedOption) {
      selectedOption.classList.add('selected');
    }
  }
}

CSS代码：

.selected {
  background-color: #f00;
  color: #fff;
}

在上面的代码中，我们先定义了一个变量`selected`来存储当前选中的颜色和尺码。然后给颜色和尺码的选项添加了点击事件，在点击事件中更新了选中的颜色和尺码，并调用了`highlightSelectedOptions`函数来高亮显示当前选中的颜色和尺码。`highlightSelectedOptions`函数中，我们先移除了所有选项的高亮显示类名，然后判断当前选中的颜色和尺码是否都已经选择了，如果都已经选择了，就找到对应的选项并给其添加高亮显示的类名。最后，在CSS中我们定义了一个`.selected`类来实现选项的高亮显示效果。