0

Класс .select работает по принципу тега select, .screen отображает выбранный нами слева .select-box (выбранный по атрибуту data-value="x" который отобразит .screen-slide по соответствующему атрибуту id="x").

Как это можно реализовать через jQuery? (первый .screen-slide должен отображать при загрузке страницы)

.box {
  display: flex;
  height: 600px;
}
.box .select {
  max-width: 100%;
  width: 320px;
  overflow-y: scroll;
  max-height: 100%;
  height: 600px;
}
.box .select-box {
  padding: 51px;
  display: flex;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}
.box .select-box:first-child {
  border-top: 0;
}
.box .select-box:last-child {
  border-bottom: 0;
}
.box .select-box p {
  font-size: 20px;
  color: #9fa9a9;
  margin: auto;
}
.box .select-box i {
  margin-right: 10px;
  font-size: 48px;
  color: #3d3e42;
}
.box .screen {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
  height: 600px;
}
.box .screen-slide {
  display: none;
}
.box .screen h1 {
  font-size: 24px;
  font-weight: 700;
  color: #636c6c;
}
.box .screen p {
  font-size: 16px;
  color: #afb8b8;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box">
  
  <div class="select">
    <div class="select-box" data-value="1">
      <i class="fa fa-envelope-o"></i> 
      <p>Heading title one</p>
    </div>
    <div class="select-box" data-value="2">
      <i class="fa fa-music"></i>
      <p>Heading title one</p>
    </div>
    <div class="select-box" data-value="3">
      <i class="fa fa-heart"></i>
      <p>Heading title one</p>
    </div>
    <div class="select-box" data-value="4">
      <i class="fa fa-user"></i>
      <p>Heading title one</p>
    </div>
    <div class="select-box" data-value="5">
      <i class="fa fa-film"></i>
      <p>Heading title one</p>
    </div>
    <div class="select-box" data-value="6">
      <i class="fa fa-th-large"></i>
      <p>Heading title one</p>
    </div>
    <div class="select-box" data-value="7">
      <i class="fa fa-th"></i>
      <p>Heading title one</p>
    </div>
    <div class="select-box" data-value="8">
      <i class="fa fa-check"></i>
      <p>Heading title one</p>
    </div>
    <div class="select-box" data-value="9">
      <i class="fa fa-glass"></i>
      <p>Heading title one</p>
    </div>
    <div class="select-box" data-value="10">
      <i class="fa fa-star-o"></i>
      <p>Heading title one</p>
    </div>
  </div>
  
  <div class="screen">
    <div id="1" class="screen-slide">
      <h1>Heading Feature title goes here</h1>
      <p>
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
      </p>
    </div>
    <div id="2" class="screen-slide">
      <h1>Heading Feature title goes here</h1>
      <p>
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
      </p>
    </div>
    <div id="3" class="screen-slide">
      <h1>Heading Feature title goes here</h1>
      <p>
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
      </p>
    </div>
    <div id="4" class="screen-slide">
      <h1>Heading Feature title goes here</h1>
      <p>
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
      </p>
    </div>
    <div id="5" class="screen-slide">
      <h1>Heading Feature title goes here</h1>
      <p>
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
      </p>
    </div>
    <div id="6" class="screen-slide">
      <h1>Heading Feature title goes here</h1>
      <p>
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
      </p>
    </div>
    <div id="7" class="screen-slide">
      <h1>Heading Feature title goes here</h1>
      <p>
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
      </p>
    </div>
    <div id="8" class="screen-slide">
      <h1>Heading Feature title goes here</h1>
      <p>
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
      </p>
    </div>
    <div id="9" class="screen-slide">
      <h1>Heading Feature title goes here</h1>
      <p>
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
      </p>
    </div>
    <div id="10" class="screen-slide">
      <h1>Heading Feature title goes here</h1>
      <p>
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
      </p>
    </div>
  </div>
  
</div>

1 ответ 1

1

$(document).ready(function(){
  $('.screen .screen-slide:first-child').fadeIn(); // отображаем первый слайд
  $('.select-box').click(function(){
    $('.screen .screen-slide').hide()
    $('#'+$(this).data('value')).fadeIn();
  });
});
.box {
  display: flex;
  height: 600px;
}
.box .select {
  max-width: 100%;
  width: 320px;
  overflow-y: scroll;
  max-height: 100%;
  height: 600px;
}
.box .select-box {
  padding: 51px;
  display: flex;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}
.box .select-box:first-child {
  border-top: 0;
}
.box .select-box:last-child {
  border-bottom: 0;
}
.box .select-box p {
  font-size: 20px;
  color: #9fa9a9;
  margin: auto;
}
.box .select-box i {
  margin-right: 10px;
  font-size: 48px;
  color: #3d3e42;
}
.box .screen {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
  height: 600px;
}
.box .screen-slide {
  display: none;
}
.box .screen h1 {
  font-size: 24px;
  font-weight: 700;
  color: #636c6c;
}
.box .screen p {
  font-size: 16px;
  color: #afb8b8;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box">
  
  <div class="select">
    <div class="select-box" data-value="1">
      <i class="fa fa-envelope-o"></i> 
      <p>Heading title one</p>
    </div>
    <div class="select-box" data-value="2">
      <i class="fa fa-music"></i>
      <p>Heading title one</p>
    </div>
    <div class="select-box" data-value="3">
      <i class="fa fa-heart"></i>
      <p>Heading title one</p>
    </div>
    <div class="select-box" data-value="4">
      <i class="fa fa-user"></i>
      <p>Heading title one</p>
    </div>
    <div class="select-box" data-value="5">
      <i class="fa fa-film"></i>
      <p>Heading title one</p>
    </div>
    <div class="select-box" data-value="6">
      <i class="fa fa-th-large"></i>
      <p>Heading title one</p>
    </div>
    <div class="select-box" data-value="7">
      <i class="fa fa-th"></i>
      <p>Heading title one</p>
    </div>
    <div class="select-box" data-value="8">
      <i class="fa fa-check"></i>
      <p>Heading title one</p>
    </div>
    <div class="select-box" data-value="9">
      <i class="fa fa-glass"></i>
      <p>Heading title one</p>
    </div>
    <div class="select-box" data-value="10">
      <i class="fa fa-star-o"></i>
      <p>Heading title one</p>
    </div>
  </div>
  
  <div class="screen">
    <div id="1" class="screen-slide">
      <h1>1 Heading Feature title goes here</h1>
      <p>
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
      </p>
    </div>
    <div id="2" class="screen-slide">
      <h1>2 Heading Feature title goes here</h1>
      <p>
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
      </p>
    </div>
    <div id="3" class="screen-slide">
      <h1>3 Heading Feature title goes here</h1>
      <p>
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
      </p>
    </div>
    <div id="4" class="screen-slide">
      <h1>4 Heading Feature title goes here</h1>
      <p>
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
      </p>
    </div>
    <div id="5" class="screen-slide">
      <h1>5 Heading Feature title goes here</h1>
      <p>
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
      </p>
    </div>
    <div id="6" class="screen-slide">
      <h1>6 Heading Feature title goes here</h1>
      <p>
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
      </p>
    </div>
    <div id="7" class="screen-slide">
      <h1>7 Heading Feature title goes here</h1>
      <p>
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
      </p>
    </div>
    <div id="8" class="screen-slide">
      <h1>8 Heading Feature title goes here</h1>
      <p>
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
      </p>
    </div>
    <div id="9" class="screen-slide">
      <h1>9 Heading Feature title goes here</h1>
      <p>
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
      </p>
    </div>
    <div id="10" class="screen-slide">
      <h1>10 Heading Feature title goes here</h1>
      <p>
      Nunc accumsan hendrerit nunc, ac venenatis magna facilisis quis. Ut sit amet mi ac neque sodales facilisis. Nullam tempus fermentum lorem nec interdum. Ut id orci id sapien imperdiet vehicula. Etiam quis dignissim ante. Donec convallis tincidunt ligula, ac luctus mi interdum a.
      </p>
    </div>
  </div>
  
</div>

1
  • можно вообще уйти от data-value и id, изменив обработчик клика на $('.screen .screen-slide').hide().eq($(this).index()).fadeIn();
    – Pavel
    Commented 10 февр. 2019 в 4:58

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.