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

Сразу открывается тег 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 шт):

Автор решения: Roman

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

$(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>

→ Ссылка
Автор решения: Сергей В.

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

→ Ссылка