У меня есть 4 div: s, в то время как только определенное содержимое div отображается в указанной позиции тела html, как использовать css для отображения всего содержимого 4 div в одном и том же месте на основе URL-адреса, по которому щелкнули.

Если щелкнуть URL-адрес № 1, он должен отображать содержимое в разделе № 1 и т. Д. - в течение 4 разделов, но в середине страницы должен отображаться только один раздел за раз.

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>
0
Rachana Korem 21 Авг 2018 в 07:42

3 ответа

Лучший ответ

Используйте 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>
0
לבני מלכה 21 Авг 2018 в 05:08

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

Javascript:

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

0
Dharmesh Patel 21 Авг 2018 в 11:35

Вы можете использовать только 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>
0
Gerard 21 Авг 2018 в 05:26
51941676