Javascript 如何使用CSS在HTML正文的同一位置显示所有4 div:s内容

我有4个div:s，一次只有一个div内容显示在html主体的指定位置，如何使用css根据单击的url在同一位置显示所有4个div的内容

如果点击URL 1，则应该显示DIV 1中的内容，等等——4个div，但是在页面中间应该只显示一个div。

CSS HTML

---

使用

onclick

至

a

并通过其

id

在函数或选择器中（无空格）

函数func（id）{
$（'.viewerpane'）.hide（）；
$（'#'+id）.show（）；
}

.viewerpane{
边缘顶部：10px；
左边距：100px；
宽度：1200px；
高度：560px；
}
a{
显示：块；
}

滑动\访问\查看窗格
办公时间之后
周末访问浏览网页
所有用户、数据、视图平面

您可以为此使用仅CSS的解决方案

div，
输入{
显示：无；
}
标签{
光标：指针；
}
标签：悬停{
颜色：红色；
}
标签：非（：最后一个子项）{
右边距：1rem；
}
#n1：选中~.n1{
显示：内联块；
}
#n2：选中~.n2{
显示：内联块；
}
#n3:已选中。n3{
显示：内联块；
}
#n4:已选中。n4{
显示：内联块；
}

链接1
链接2
链接3
链接4
选项1
Lorem ipsum door sit amet，Concertetur adipising elit，sed do eiusmod temporal incidedut ut labor and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
如果你是一个不受欢迎的人，那么你就可以在一个不受欢迎的地方。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
方案2
Lorem ipsum door sit amet，Concertetur adipising elit，sed do eiusmod temporal incidedut ut labor and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
如果你是一个不受欢迎的人，那么你就可以在一个不受欢迎的地方。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
选项3
Lorem ipsum door sit amet，Concertetur adipising elit，sed do eiusmod temporal incidedut ut labor and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
如果你是一个不受欢迎的人，那么你就可以在一个不受欢迎的地方。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
选项4
Lorem ipsum door sit amet，Concertetur adipising elit，sed do eiusmod temporal incidedut ut labor and dolore magna aliqua。但是，在最低限度上，我们需要一个实验室来进行日常工作。酒后驾车
如果你是一个不受欢迎的人，那么你就可以在一个不受欢迎的地方。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。

html

javasript：

let divs_to_show;
let index = 0;
document.addEventListener('DOMContentLoaded',function(e) 
{
let divs = document.getElementsByClassName('viewerpane');
divs_to_show = Array.from(divs);
showDiv(); 
});

document.querySelector('#click-me').addEventListener('click', changeDiv);

function changeDiv(e) 
{ 
 divs_to_show.forEach(div => 
  {
   div.className = 'viewerpane hidden';
  });
  showDiv();
  e.preventDefault();
}

function showDiv() 
{
 divs_to_show[index].className = 'viewerpane';index++;
}

---

请看这里的实时示例

您需要JavaScript，如果您的ID有效，您会发现这要容易得多；ID不能包含空格。除此之外，您可能希望在CSS中使用相对单位（例如百分比）来表示

宽度

和

高度

——否则您只能在桌面计算机上看到文本。尝试使用制表符。虽然制表符通常使用JS完成，但制表符只能使用CSS完成。非常感谢@charankumar:），它对我有用你什么意思？

<div class="row">
  <div class="viewerpane" id="Swipe Access_viewerpane" style="position:relative"></div>
  <div class="viewerpane" id="After Office Hours_viewerpane" style="position:relative"></div>
  <div class="viewerpane" id="Weekend Access_viewerpane" style="position:relative"></div>
  <div class="viewerpane" id="All Users Data_viewerpane" style="position:relative"></div>
</div>

<div class="content">
  <div class="viewerpane hidden" id="Swipe_Access_viewerpane">
    <p>test data1</p> 
  </div>
  <div class="viewerpane hidden" id="After_Office_Hours_viewerpane">
    <p>test data2</p>
  </div>
  <div class="viewerpane hidden" id="Weekend_Access_viewerpane">
    <p>test data3</p> 
  </div>
  <div class="viewerpane hidden" id="All_Users_Data_viewerpane">
    <p>test data4</p> 
  </div>
</div>      
<a id="click-me">click here to see the effect</a> 

.content {
  position: relative;
  height: 900px;
 }
.viewerpane {
  display: block;
  text-align: center;
  width: 1200px;
  height: 560px; 
  position:absolute;
  top:50%;
  left:50%;
  transform:translateY(-50%)  translateX(-50%);
  -webkit-transform:translateY(-50%)  translateX(-50%);
  -moz-transform:translateY(-50%)  translateX(-50%);
  -ms-transform:translateY(-50%)  translateX(-50%);
  display: table;
}
.viewerpane p {
  display: table-cell;
  vertical-align: middle;
}
.hidden {
  display: none;
}

let divs_to_show;
let index = 0;
document.addEventListener('DOMContentLoaded',function(e) 
{
let divs = document.getElementsByClassName('viewerpane');
divs_to_show = Array.from(divs);
showDiv(); 
});

document.querySelector('#click-me').addEventListener('click', changeDiv);

function changeDiv(e) 
{ 
 divs_to_show.forEach(div => 
  {
   div.className = 'viewerpane hidden';
  });
  showDiv();
  e.preventDefault();
}

function showDiv() 
{
 divs_to_show[index].className = 'viewerpane';index++;
}