CSS

Question

我有4个div：s，一次只在html正文的指定位置显示一个div内容，如何根据单击的URL使用CSS在同一位置显示所有4 div的内容。 / p>

如果单击了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>

Answer 2

您可以为此使用纯CSS解决方案。

div,
input {
  display: none;
}

label {
  cursor: pointer;
}

label:hover {
  color: red;
}

label:not(:last-child) {
  margin-right: 1rem;
}

#n1:checked~.n1 {
  display: inline-block;
}

#n2:checked~.n2 {
  display: inline-block;
}

#n3:checked~.n3 {
  display: inline-block;
}

#n4:checked~.n4 {
  display: inline-block;
}

<input type="radio" name="sel" id="n1"><label for="n1">Link 1</label>
<input type="radio" name="sel" id="n2"><label for="n2">Link 2</label>
<input type="radio" name="sel" id="n3"><label for="n3">Link 3</label>
<input type="radio" name="sel" id="n4"><label for="n4">Link 4</label>

<div class="n1">
  <p>Option 1</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="n2">
  <p>Option 2</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="n3">
  <p>Option 3</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="n4">
  <p>Option 4</p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
  aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 3

html

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

css

.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;
}

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++;
}

在此处查看实时示例https://codepen.io/kamindu/pen/bxGxqZ

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

CSS

HTML

3 个答案: