javascript - 如何使用CSS显示所有4个div :s content in a same place of HTML body

Question

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

如果单击 url #1，它应该显示 div #1 中的内容，依此类推 - 对于 4 个 div，但一次只能在页面中间显示一个 div。

CSS

.viewerpane {
  margin-top: 10px;
  margin-left: 100px;
  width: 1200px;
  height: 560px;
}

HTML

<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>

Answer 1

使用onclick 到a 并在函数.hide() 中使用或 .show()通过他的id选择器(没有空格)

function func(id){
$('.viewerpane').hide();
$('#'+id).show();
}

    .viewerpane {
      margin-top: 10px;
      margin-left: 100px;
      width: 1200px;
      height: 560px;
    }
    a{
    display:block;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" onclick="func('Swipe_Access_viewerpane')">Swipe_Access_viewerpane</a>
<a href="#" onclick="func('After_Office_Hours_viewerpane')">After_Office Hours_viewerpane</a>
<a href="#" onclick="func('Weekend_Access_viewerpane')">Weekend_Access_viewerpane</a>
<a href="#" onclick="func('All_Users_Data_viewerpane')">All_Users_Data_viewerpane</a>
<div class="row">
      <div class="viewerpane" id="Swipe_Access_viewerpane" style="position:relative">Swipe_Access_viewerpane</div>
      <div class="viewerpane" id="After_Office_Hours_viewerpane" style="position:relative">After_Office Hours_viewerpane</div>
      <div class="viewerpane" id="Weekend_Access_viewerpane" style="position:relative">Weekend_Access_viewerpane</div>
      <div class="viewerpane" id="All_Users_Data_viewerpane" style="position:relative">All_Users_Data_viewerpane</div>
    </div>