Как сделать, чтобы при клике на кнопки появлялся текст?

Question

Как сделать, чтобы при клике на кнопки "web design", "mobile app", "branding" появлялся текст?

Answer 1

.lbl-jobtype {
  border: 1px solid black;
}

input[name='jobtype'] {
  display: none;
}

.text-for-jobtype {
  display: none;
}

#jt-webapp:checked~#t-webapp {
  display: block;
}

#jt-mobile:checked~#t-mobile {
  display: block;
}

#jt-branding:checked~#t-branding {
  display: block;
}

<input type="radio" name="jobtype" id="jt-webapp" />
<label class="lbl-jobtype" for="jt-webapp">WEB-APP</label>

<input type="radio" name="jobtype" id="jt-mobile" />
<label class="lbl-jobtype" for="jt-mobile">MOBILE</label>

<input type="radio" name="jobtype" id="jt-branding" />
<label class="lbl-jobtype" for="jt-branding">BRANDING</label>


<p class="text-for-jobtype" id="t-webapp">Text for WEB-APP</p>
<p class="text-for-jobtype" id="t-mobile">Text for MOBILE</p>
<p class="text-for-jobtype" id="t-branding">Text for BRANDING</p>

Answer 2

Это простые табы. Вот вариант с помощью jQuery:

$(document).ready(function() {

  $('ul.tabs li').click(function() {
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
  })

})

ul.tabs {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

ul.tabs li {
  background: none;
  color: black;
  display: inline-block;
  padding: 10px 30px;
  border-radius: 30px;
  cursor: pointer;
}

ul.tabs li.current {
  background: crimson;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
  color: white;
  cursor: default;
}

.tab-content {
  display: none;
  padding: 15px;
}

.tab-content.current {
  display: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <ul class="tabs">
    <li class="tab-link current" data-tab="tab-1">Раз</li>
    <li class="tab-link" data-tab="tab-2">Два</li>
    <li class="tab-link" data-tab="tab-3">Три</li>
    <li class="tab-link" data-tab="tab-4">Четыре</li>
  </ul>
  <div id="tab-1" class="tab-content current">
    Текст 1 вкладки
  </div>
  <div id="tab-2" class="tab-content">
    Текст 2 вкладки
  </div>
  <div id="tab-3" class="tab-content">
    Текст 3 вкладки
  </div>
  <div id="tab-4" class="tab-content">
    Текст 4 вкладки
  </div>
</div>

Answer 3

Такая штука называется "Tabs" (Вкладки), вариантов реализации вагон, но мне нравится на js\jq.

Вот мой вариант реализации:

const tabParent = $('.tabs-block');

tabParent.on('click', '.tabs > div', function(){
  if(!$(this).hasClass('--active')) {
    tabParent
      .find('.tabs > .--active, .content .--active')
      .removeClass('--active');
      
    $(this)
      .addClass('--active');
    
    tabParent
      .find('.content > div')
      .eq($(this).index())
      .addClass('--active');
  }
});

.tabs-block {
  display: block;
  width: 100%;
  max-width: 700px;
  color: #333;
}

.tabs-block .tabs {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}

.tabs-block .tabs > div {
  display: block;
  padding: 10px 15px;
  border-radius: 40px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: '..';
  cursor: pointer;
}

.tabs-block .tabs > div.--active {
  background: #f42267;
  color: #fff;
  box-shadow: 0 0 10px 0 rgba(0,0,0,.35);
  cursor: default;
}

.tabs-block .content {
  display: block;
  width: 100%;
}

.tabs-block .content > div {
  display: none;
  width: 100%;
}

.tabs-block .content > div.--active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs-block">
  <div class="tabs">
    <div class="--active">Web design</div>
    <div>Mobile app</div>
    <div>Branding</div>
    <div>Branding</div>
  </div>
  <div class="content">
    <div class="--active">text for web design</div>
    <div>text for mobile app</div>
    <div>text for branding</div>
    <div>text for branding</div>
  </div>
</div>

БЛОГ НА HUSL

Как сделать, чтобы при клике на кнопки появлялся текст?

Ответы (3 шт):