前端，四个div框架里面都有三个连接和三个div，点击第一个div框架的链接一弹出框架一的div，四个框架不会交错

根据您的描述，我理解您的问题是：如何实现四个div框架，每个框架里面都有三个链接和三个div，点击第一个框架的链接后弹出该框架的第一个div，且四个框架不会交错。

实现这个功能可以采用以下步骤：

1. 在HTML中创建四个div框架，每个框架内包含三个链接和三个div，可以使用以下代码作为示例：

<div class="frame">
  <a href="#" class="link">Link 1</a>
  <a href="#" class="link">Link 2</a>
  <a href="#" class="link">Link 3</a>
  <div class="div1">Div 1</div>
  <div class="div2">Div 2</div>
  <div class="div3">Div 3</div>
</div>
<div class="frame">
  <a href="#" class="link">Link 1</a>
  <a href="#" class="link">Link 2</a>
  <a href="#" class="link">Link 3</a>
  <div class="div1">Div 1</div>
  <div class="div2">Div 2</div>
  <div class="div3">Div 3</div>
</div>
<div class="frame">
  <a href="#" class="link">Link 1</a>
  <a href="#" class="link">Link 2</a>
  <a href="#" class="link">Link 3</a>
  <div class="div1">Div 1</div>
  <div class="div2">Div 2</div>
  <div class="div3">Div 3</div>
</div>
<div class="frame">
  <a href="#" class="link">Link 1</a>
  <a href="#" class="link">Link 2</a>
  <a href="#" class="link">Link 3</a>
  <div class="div1">Div 1</div>
  <div class="div2">Div 2</div>
  <div class="div3">Div 3</div>
</div>

2. 使用JavaScript为每个链接添加点击事件，当点击链接时，显示该框架内的第一个div，同时隐藏其他框架内的所有div。可以使用以下代码实现：

// 获取所有链接和div
var links = document.querySelectorAll('.link');
var divs = document.querySelectorAll('.frame div');

// 为每个链接添加点击事件
links.forEach(function(link, index) {
  link.addEventListener('click', function() {
    // 隐藏所有框架内的div
    divs.forEach(function(div) {
      div.style.display = 'none';
    });
    // 显示当前框架内的第一个div
    var div1 = document.querySelectorAll('.frame')[index].querySelector('.div1');
    div1.style.display = 'block';
  });
});

3. 使用CSS对框架进行布局和样式设置，例如设置框架的宽度、高度、边框和间距等，可以使用以下代码作为示例：

.frame {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  margin: 10px;
  float: left;
}
.link {
  display: block;
  margin: 10px 0;
}
.div1, .div2, .div3 {
  display: none;
  padding: 10px;
}

通过以上步骤，即可实现四个div框架，每个框架内包含三个链接和三个div，点击第一个框架的链接后弹出该框架的第一个div，且四个框架不会交错的功能。