Как заставить переключатели с вкладками работать в чистом CSS? - PullRequest
Новая
       19

Как заставить переключатели с вкладками работать в чистом CSS?

0 голосов
/ 23 октября 2018

Я работаю над переключателями, которые отображают каждую опцию после нажатия.Например, если я нажимаю «По местоположению», я хочу отобразить вкладку с полем, в которое я ввел поле, и если щелкнуть «По процедуре», она отобразит другую вкладку с другим полем.

Однако я также хотел сделать его отзывчивым, и переключатели, расположенные друг над другом в мобильной версии, центрированы по центру, но выровнены по левому краю.

Вот что я сделал в своем коде: 

.steps-box {
  margin-top: 60px;
  background-color: white;
  border-radius: 5px;
  padding: 30px 30px;
  text-align: center; }

.steps-box h2 {
  color: #002c4a; }

.steps-box2 {
  background-color: white;
  border-radius: 5px;
  padding: 30px 30px; }

/*Schedule Options on Step #1 */
.schedule_options {
  position: relative;
  width: 90%;
  margin: 0 auto;
  padding: 35px 0;
  z-index: 10; }

.schedule_tabs {
  width: 100%;
  margin: 0 auto; }

.schedule_options input[type="radio"] {
  position: absolute;
  opacity: 0;
  z-index: -1; }

.schedule_options label {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
  padding-left: 33px;
  padding-right: 10px;
  line-height: 36px;
  cursor: pointer;
  color: #51a5ba; }

.schedule_options label i {
  display: none; }

.schedule_options label::before {
  content: " ";
  position: absolute;
  top: 4px;
  left: 0;
  display: block;
  width: 24px;
  height: 24px;
  border: 2px solid #51a5ba;
  border-radius: 4px;
  z-index: -1; }

.schedule_options input[type="radio"] + label::before {
  border-radius: 5px; }

/* Checked */
.schedule_options input[type="radio"]:checked + label {
  padding-left: 10px;
  padding-right: 15px;
  color: #fff; }

.schedule_options input[type="radio"]:checked + label i {
  display: inline-block;
  padding-right: 10px; }

.schedule_options input[type="radio"]:checked + label::before {
  top: 0;
  width: 100%;
  height: 100%;
  background: #51a5ba; }

/* Transition */
.schedule_options label,
.schedule_options label::before {
  -webkit-transition: .25s all ease;
  -o-transition: .25s all ease;
  transition: .25s all ease; }

.schedule_options section {
  display: none;
  padding: 20px 0 0; }

.schedule_tabs #rb1:checked ~ .schedule_options #content1,
.schedule_tabs #rb2:checked ~ .schedule_options #content2,
.schedule_tabs #rb3:checked ~ .schedule_options #content3 {
  display: block; }
  
 @media screen and (max-width: 480px) {
  
  .schedule_options {
    text-align: left; }

  .schedule_tabs {
    width: 170px;
    margin: 0 auto; } }
<section>
<div class="container">
<div class="steps-box">
<h2>How do you want to schedule your appointment?</h2>
<div class="schedule_options">
<div class="schedule_tabs">
  <input type="radio" name="rb" id="rb1">
  <label for="rb1"><i class="fas fa-check"></i>By Location</label>
  <input type="radio" name="rb" id="rb2">
  <label for="rb2"><i class="fas fa-check"></i>By Availability</label>
  <input type="radio" name="rb" id="rb3">
  <label for="rb3"><i class="fas fa-check"></i>By Procedure</label>
</div>
                    
<section id="content1">
   <p>Content 1</p>
</section>
<section id="content2">
   <p>Content 2</p>
</section>
   <section id="content3">
<p>Content 3</p>
</section>
</div>
</div>
</div>
</section>

Как вы заметили, без <div class="schedule_tabs"> я могу легко отображать содержимое каждой вкладки.С этим <div class="schedule_tabs"> я могу центрировать переключатели в мобильной версии, но содержимое каждой вкладки не будет отображаться.

Как это исправить?

Ответы [ 2 ]

0 голосов
/ 24 октября 2018

Я только что переформатировал мой код.Вот мой обновленный код, который работает 

.schedule_options {
    position: relative;
    width: 99%;
    margin: 0 auto;
    padding: 35px 0;
    z-index: 10;
}
.schedule_options input[type="radio"] {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.schedule_options label {
    position: relative;
    display: inline-block;
    padding-left: 33px;
    /*padding-right: 10px;*/
    line-height: 36px;
    cursor: pointer;
    color: $teal;
    text-align: left;
    width: /*160px*/ 160px;
    margin: 0 auto 10px;
}
.schedule_options label i {
    display: none;
}
.schedule_options label::before {
  content: " ";
  position: absolute;
  top: 4px;
  left: 0;
  display: block;
  width: 24px;
  height: 24px;
  border: 2px solid $teal;
  border-radius: 4px;
  z-index: -1;
}
.schedule_options input[type="radio"] + label::before {
  border-radius: 5px;
}
/* Checked */
.schedule_options input[type="radio"]:checked + label {
    color: #fff;
}
.schedule_options input[type="radio"]:checked + label i {
    display: block;
    position: absolute;
    width: 24px;
    height: 24px;
    top: 10px;
    left: 8px;
}
.schedule_options input[type="radio"]:checked + label::before {
    top: 0;
    width: /*100%*/ 160px;
    height: 100%;
    background: #51a5ba;
}
/* Transition */
.schedule_options label, .schedule_options label::before {
  -webkit-transition: .25s all;
  -o-transition: .25s all;
  transition: .25s all;
}
.schedule_options section {
  display: none;
  padding: 20px 0 0;
}
.schedule_panels {
  
}
#rb1:checked ~ .schedule_panels #content1,
#rb2:checked ~ .schedule_panels #content2,
#rb3:checked ~ .schedule_panels #content3 {
  display: block;
}
@media screen and (max-width: 768px) {
.schedule_options {
    display: flex;
    flex-direction: column;
}
}
<div class="schedule_options">
                    
                    <input type="radio" name="rb" id="rb1" />
                    <label for="rb1"><i class="fas fa-check"></i>By Location</label>
                    <input type="radio" name="rb" id="rb2" />
                    <label for="rb2"><i class="fas fa-check"></i>By Availability</label>
                    <input type="radio" name="rb" id="rb3" />
                    <label for="rb3"><i class="fas fa-check"></i>By Procedure</label>
                    
                    <div class="schedule_panels">
                        <section id="content1">
                            <p>Content 1</p>
                        </section>
                        <section id="content2">
                            <p>Content 2</p>
                        </section>
                        <section id="content3">
                            <p>Content 3</p>
                        </section>
                    </div>
                </div>
0 голосов
/ 24 октября 2018

Это происходит потому, что добавление <div class="schedule_tabs"> означает, что inputs и labels больше не являются братьями и сестрами.

Взято из Mozilla Developer Network :

Комбинатор ~ выбирает братьев и сестер.Это означает, что второй элемент следует за первым (хотя и не обязательно сразу), и оба имеют одного и того же родителя.Синтаксис: A ~ B Пример: p ~ span будет соответствовать всем элементам, которые следуют за <p>.

Ваши единственные другие варианты - +, который выбирает только соседних братьев и сестер, >, который тольковыбирает прямой дочерний элемент и (пробел), который выбирает всех дочерних элементов.

Поэтому кажется, что это невозможно в чистом CSS.Хотя с такими манипуляциями с DOM я бы настоятельно рекомендовал использовать даже очень простой JavaScript.

...