У меня есть 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>
javascript jquery html css
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

Похожие вопросы

29 Как заменить все вхождения строки?
💵 Получи $100 на хостинг на 60 дней.
Регистрируйся!

Новые вопросы

2 Может ли кто-нибудь объяснить в самых непрофессиональных условиях, что делает unmountComponentAtNode '?
2 Выполнение обещания через некоторое время t или при возникновении события, в зависимости от того, что произойдет раньше
2 Отфильтруйте массив по условию и измените имя ключа
2 Объединить объекты массива в один объект по ключу
2 переопределить функцию toString в javascript
5 рекурсивный setTimeout с асинхронным ожиданием
2 новое обещание внутри асинхронной функции, чтобы получить значение вне асинхронной функции
2 Таблица сравнения в html / js
3 как переключаться между двумя типами представления классов css с помощью React
2 Javascript - фильтрация списка: как найти пересечение между массивом с объектами, включая массив и массив?
Все вопросы по теме javascript >

javascript

По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.

Подробнее про javascript...