Для разделения вывода на отдельные поля можно использовать различные подходы, в зависимости от того, какой язык программирования вы используете и какую структуру данных вы хотите вывести.
Один из способов - это использовать HTML и CSS для создания визуального разделения полей. Вы можете использовать элементы `<div>` или `<section>` для создания отдельных полей и применять стили, чтобы отобразить их как отдельные блоки. Например:
```html
<div id="field1">
Вывод первого поля
</div>
<div id="field2">
Вывод второго поля
</div>
```
Используя CSS, вы можете настроить стили для каждого поля:
```css
#field1 {
...
}
#field2 {
...
}
```
Еще один подход - это использование массивов или списков, чтобы хранить вывод каждого поля отдельно. В языках программирования, таких как Python или JavaScript, вы можете объявить пустые массивы и заполнять их значениями внутри циклов или условий. Например, в Python:
```python
field1 = []
field2 = []
for item in catalog:
if item.field == 1:
field1.append(item)
elif item.field == 2:
field2.append(item)
```
После этого, вы можете использовать эти массивы для отображения каждого поля в отдельности.
Независимо от выбранного метода, вам также потребуется добавить функционал табов для фильтрации содержимого. Для этого вы можете использовать JavaScript и обработчики событий для переключения между полями.