Как сделать так, чтобы сразу при заходе на страницу отображалось содержимое одного из табов
$(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>