点击链接时显示对应的 <div>答案

【问题标题】：Show corresponding <div> when clicking on link点击链接时显示对应的 <div>
【发布时间】：2021-09-17 22:53:39
【问题描述】：

链接a被foreach包围，div元素也被foreach包围。

我想，当我们点击一个链接<a>时，会出现对应的<div>内容，当你点击另一个链接时，会出现对应的<div>内容，替换之前显示的内容。

链接到：

@foreach($ projects as $ project)
<a onclick="myFunction('project'+$project-> id}}) ">
 Click
</a>
@endforeach

div内容：

@foreach($ projects as $ project)
<div id="project {{$ project-> id}}" style="display: none">
  Content {{ $ project-> id}}
</div>
@endforeach

这是我正在使用的 JavaScript 函数：

<script>
  function myFunction (x) {
          if (document.getElementById (x) .style.display == "none") {
    document.getElementById(x).style.display = "flex";
          } else {
    document.getElementById(x).style.display = "none";
          }
       }
</script>

【问题讨论】：

当前代码有什么问题？
将 id="project {{$ project-> id}}" 更改为 id="project{{$ project-> id}}"。我删除了project 和括号之间的空格
<div> id 中有一个空格。 id 中不能有空格

标签： javascript html css laravel

【解决方案1】：

在刀片文件中

 @foreach($projects as $project)
    <a href="#"  class="projectLink" data-id="{{$project->id}}">
     Click
    </a>
    @endforeach

对于 div

@foreach($projects as $project)
<div id="project-{{$project->id}}" class="project" style="display: none">
  Content {{ $project->id}}
</div>
@endforeach

然后在脚本中

<script>
$(document).on('click','.projectLink',function(){
   $('.project').hide();
  var activeProject=$(this).attr("data-id");
  $('#project-'+activeProject).show();
})
</script>

【讨论】：

你好@John Lolo 先生。非常感谢您，您的帮助满足了我的所有期望，再次非常感谢您。