<section class="product">
  <div class="container">
    <ul class="product__list">
      <li>Продукция</li>
      <li><a href=""  data-products="tab1">За видом продукции</a></li>
      <li><a href="" data-products="tab2" class="active">За видом животных</a></li>
    </ul>
    <div class="product__wrap">
      <ul class="product__item product__item--animals">
        <li><a href="" id="big" data-tab ="big" class="active">худоба</a></li>
        <li><a href="" id="pigs" data-tab ="pigs">Свиньи</a></li>
        <li><a href="" id="birds" data-tab ="birds">Птицы</a></li>
      </ul>
      <div class="product__item product__item--block">
        <ul class="big"  data-tab ="big">
          <li><a href="">подпункт 1</a></li>
          <li><a href="">подпункт 2</a></li>
        
        </ul>
        <ul class="pigs"  data-tab ="pigs" style="display: none">
          <li><a href="">222222</a></li>
        </ul>
        <ul class="birds"  data-tab ="birds" style="display: none">
          <li><a href="">333333</a></li>
        </ul>

      </div>
    </div>
    
       <div class="product__wrap js-products" data-products="tab1">
        1
      </div>
      <div class="product__wrap js-products" data-products="tab2" style="display:none;">
        2
      </div>
  </div>
</section>
.product__list {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	margin-top: 25px;
	margin-bottom: 35px;
}

.product__list li,
.product__list li a {
	font-size: 30px;
	line-height: 1;
	color: #144693;
	text-transform: uppercase;
}

.product__list li:not(:last-child) {
	margin-right: 20px;
}

.product__list li:first-child {
	position: relative;
	margin-right: 60px;
}

.product__list li:first-child:after {
	position: absolute;
	right: 0px;
	top: 0px;
	content: ' ';
	width: 10px;
	height: 10px;
	top: -webkit-calc(50% - 5px);
	top: calc(50% - 5px);
	border-right: 2px solid #1c1c1c;
	border-bottom: 2px solid #1c1c1c;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	font-size: 18px;
	right: -32px;
}

.product__list li a {
	font-size: 16px;
	display: block;
	border: 2px solid #144693;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	padding: 8px 12px;
}

.product__list li a:hover {
	background-color: #144693;
	color: #fff;
}

.product__list li a.active {
	background-color: #144693;
	color: #fff;
}

.product__wrap {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 40px;
}

.product__item {
	-webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
	padding: 20px 15px;
}

.product__item--animals {
	width: 385px;
}

.product__item--block {
	width: -webkit-calc(100% - 385px);
	width: calc(100% - 385px);
	margin-left: 40px;
	max-height: 415px;
	overflow-y: auto;
}

.product__item li a {
	font-size: 18px;
	line-height: 1.3;
	color: #144693;
	display: inline-block;
	text-transform: uppercase;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 2px solid #144693;
	padding: 8px 12px;
	margin-bottom: 8px;
	-webkit-transition: 0.3s background-color, 0.3s color;
	-o-transition: 0.3s background-color, 0.3s color;
	transition: 0.3s background-color, 0.3s color;
}

.product__item li a.active {
	background-color: #144693;
	color: #fff;
	display: block;
}

.product__item li a:hover {
	background-color: #144693;
	color: #fff;
}

li{
  list-style-type: none;
}
a{
  text-decoration: none;
}
$(document).ready(function(){
  $('.product__item--animals a').click(function(e){
    e.preventDefault();
    var tab = $(this).attr('data-tab');
    $('.product__item--block ul').hide();
    $('.product__item--block ul[data-tab='+tab+']').show();
  });
  
  $('ul.product__list a').click(function(e){
    e.preventDefault();
    $('ul.product__list a').removeClass('active');
    $(this).addClass('active');
    var tab = $(this).attr('data-products');
    $('.js-products').hide();
    $('.js-products[data-products='+tab+']').show();
  });
  
  
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js