点击第二个div和第一个div交换位置

这是一个JavaScript的实现方法：

1. 首先获取到第一个和第二个div的引用，可以使用document.querySelector()方法来获取指定的元素。

2. 使用insertBefore()方法将第一个div插入到第二个div的前面。

代码示例：

<div id="div1" onclick="swap()">第一个div</div>
<div id="div2" onclick="swap()">第二个div</div>

<script>
function swap() {
  var div1 = document.querySelector("#div1");
  var div2 = document.querySelector("#div2");
  div2.parentNode.insertBefore(div1, div2.nextSibling);
}
</script>

注：以上代码仅供参考，具体实现可能需要根据实际情况进行调整。

相关问题

js点击这个div元素设置第二个div为显示

可以使用 JavaScript 来监听 div 元素的点击事件，并在点击时设置第二个 div 元素为显示状态。可以使用以下代码来实现：

<div id="myDiv">
  <div>第一个 div 元素</div>
  <div>第二个 div 元素</div>
  <div>第三个 div 元素</div>
</div>

const myDiv = document.querySelector('#myDiv');

myDiv.addEventListener('click', function() {
  const secondDiv = this.children[1];
  secondDiv.style.display = 'block';
});

在上面的代码中，首先获取了一个 ID 为 `myDiv` 的 div 元素，并添加了一个 `click` 事件监听器。当用户点击该 div 元素时，就会触发该事件监听器中的回调函数，你可以在该回调函数中编写处理点击事件的逻辑。在这个例子中，我们使用 `this` 关键字引用当前被点击的 div 元素，并使用 `children` 属性获取它的所有子元素。由于 `children` 属性返回的是一个类数组对象，因此可以使用索引 `[1]` 来获取第二个子元素，即第二个 div 元素。然后，使用 `style` 属性将其 `display` 属性设置为 `'block'`，从而将其显示出来。

需要注意的是，如果第二个 div 元素在初始状态下是隐藏的，那么在设置其为显示状态之前，需要先将其 `display` 属性设置为 `'none'`。如果需要在之后再将其隐藏，可以将其 `display` 属性设置为 `'none'`。

vue 默认第一个div变色 点击第二个变色第一个不变色

可以通过给两个 div 添加不同的 class，并利用 Vue 的条件渲染来实现这个效果。

首先，在 Vue 的数据中添加一个变量，用来表示是否选中第二个 div。例如，我们可以将其命名为 `selected`，初始值设为 `false`。

然后，在模板中，给第一个 div 添加一个条件判断，如果 `selected` 为 `false`，则添加一个用于变色的 class；给第二个 div 添加另一个条件判断，如果 `selected` 为 `true`，则添加相同的用于变色的 class。

最后，在第二个 div 上添加点击事件，当点击时，将 `selected` 的值改为 `true`。

下面是一个示例代码：

<template>
  <div>
    <div :class="{ 'div1': !selected }">第一个 div</div>
    <div :class="{ 'div2': selected }" @click="selectSecond">第二个 div</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: false
    };
  },
  methods: {
    selectSecond() {
      this.selected = true;
    }
  }
};
</script>

<style>
.div1 {
  /* 第一个 div 的样式 */
}

.div2 {
  /* 第二个 div 的样式 */
}
</style>

这样，初始状态下第一个 div 会有变色的样式，当点击第二个 div 后，第一个 div 不再变色，而第二个 div 变色。