0

Сразу открывается тег EASYКак сделать так, чтобы сразу при заходе на страницу отображалось содержимое одного из табов

$(document).ready(function() {
  $('.eml-triggers_item').click(function(e) {
    e.preventDefault();

    $('.eml-triggers_item').removeClass('eml-triggers_item--active');
    $('.eml-content_item').removeClass('eml-content_item--active');

    $(this).addClass('.eml-triggers_item--active');
    $($(this).attr('href')).addClass('eml-content_item--active');

  });

});
eml-tabs-triggers {
  position: relative;
  display: flex;
  justify-content: center;
}

.eml-content_item {
  display: none;
}

.eml-content_item--active {
  display: block;
}

.eml-triggers_item--active {
  color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="second-column">
  <div class="recipes">
    <div class="social-recipe">
      <h5>Recipe</h5>
      <img src="styles/img/social3.png" alt="photo">
    </div>
    <hr class="recipe-hr">
    <div class="face-column">

      <div class="eml-tab">
        <div class="eml-tabs-triggers">
          <a href="#eml-tab-1" class="eml-triggers_item">EASY</a>
          <a href="#eml-tab-2" class="eml-triggers_item">MIDDLE</a>
          <a href="#eml-tab-3" class="eml-triggers_item">LONG</a>
        </div>
        <div class="eml-tab-content">
          <div id="eml-tab-1" class="eml-content_item">
            <div class="easy-item ei-1">
              <img class="easy-photo" src="styles/img/food-item1.jpg" alt="photo">
              <div class="easy-box">
                <p>by <b>Smuckersreg Toppings</b></p>
                <h5>Thanks for the recipe</h5>
                <h5>lorem ipsum bla bla bla </h5>
                <h5>Thanks for the recipe lore</h5>
              </div>

            </div>
            <div class="easy-item ei-2">
              <img class="easy-photo" src="styles/img/food-item2.jpg" alt="photo">
              <div class="easy-box">
                <p>by <b>Smuckersreg Toppings</b></p>
                <h5> Thanks for the recipe</h5>
                <h5>lorem nks for the recipe</h5>
              </div>
            </div>
            <div class="easy-item ei-3">
              <img class="easy-photo last-easy-box" src="styles/img/food-item3.jpg" alt="photo">
              <div class="easy-box ">
                <p>by<b>Smuckersreg Toppings</b></p>
                <h5>Thanks for the recipe</h5>
                <h5>lorem nks for the recipe</h5>
              </div>
            </div>
            <a href="#" class="view-more">VIEW MORE</a>


          </div>
          <div id="eml-tab-2" class="eml-content_item">
            second
          </div>
          <div id="eml-tab-3" class="eml-content_item">
            third
          </div>


        </div>

      </div>

    </div>

2 ответа 2

1

Нужно было сделать тоже самое, что вы делали по клику, только при загрузке страницы и для отдельного элемента

$(document).ready(function() {

  const page = 1;// set page: 0-easy, 1-middle, 2-long

  $('.eml-triggers_item').eq(page).addClass('.eml-triggers_item--active')
  $($('.eml-triggers_item').eq(page).attr('href')).addClass('eml-content_item--active');

  $('.eml-triggers_item').click(function(e) {
    e.preventDefault();

    $('.eml-triggers_item').removeClass('eml-triggers_item--active');
    $('.eml-content_item').removeClass('eml-content_item--active');

    $(this).addClass('.eml-triggers_item--active');
    $($(this).attr('href')).addClass('eml-content_item--active');

  });

});
eml-tabs-triggers {
  position: relative;
  display: flex;
  justify-content: center;
}

.eml-content_item {
  display: none;
}

.eml-content_item--active {
  display: block;
}

.eml-triggers_item--active {
  color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="second-column">
  <div class="recipes">
    <div class="social-recipe">
      <h5>Recipe</h5>
      <img src="styles/img/social3.png" alt="photo">
    </div>
    <hr class="recipe-hr">
    <div class="face-column">

      <div class="eml-tab">
        <div class="eml-tabs-triggers">
          <a href="#eml-tab-1" class="eml-triggers_item">EASY</a>
          <a href="#eml-tab-2" class="eml-triggers_item">MIDDLE</a>
          <a href="#eml-tab-3" class="eml-triggers_item">LONG</a>
        </div>
        <div class="eml-tab-content">
          <div id="eml-tab-1" class="eml-content_item">
            <div class="easy-item ei-1">
              <img class="easy-photo" src="styles/img/food-item1.jpg" alt="photo">
              <div class="easy-box">
                <p>by <b>Smuckersreg Toppings</b></p>
                <h5>Thanks for the recipe</h5>
                <h5>lorem ipsum bla bla bla </h5>
                <h5>Thanks for the recipe lore</h5>
              </div>

            </div>
            <div class="easy-item ei-2">
              <img class="easy-photo" src="styles/img/food-item2.jpg" alt="photo">
              <div class="easy-box">
                <p>by <b>Smuckersreg Toppings</b></p>
                <h5> Thanks for the recipe</h5>
                <h5>lorem nks for the recipe</h5>
              </div>
            </div>
            <div class="easy-item ei-3">
              <img class="easy-photo last-easy-box" src="styles/img/food-item3.jpg" alt="photo">
              <div class="easy-box ">
                <p>by<b>Smuckersreg Toppings</b></p>
                <h5>Thanks for the recipe</h5>
                <h5>lorem nks for the recipe</h5>
              </div>
            </div>
            <a href="#" class="view-more">VIEW MORE</a>


          </div>
          <div id="eml-tab-2" class="eml-content_item">
            second
          </div>
          <div id="eml-tab-3" class="eml-content_item">
            third
          </div>


        </div>

      </div>

    </div>

1
  • А как сделать так, чтобы при открытом табе trigger-item имел другой цвет?
    – RecentFlow
    8 фев 2021 в 15:40
0

Обычно первому блоку прописывается класc active (или какой там у вас) сразу в коде html.
Так сделано на 99% сайтов, которые прошли через мои руки.
Так сделано во всех версиях бутстрап.

Ваш ответ

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

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