How can we make tab menus dynamically. How can we show it in wordpress theme

menu addition in wordpress ok. But I couldn't figure out how to add Tabs Menu in Wordpress. I want to do it without page refresh (nav-tabs class). For example 3 tabs just below the slider in the link. (https://www.deneme.website/)But I want it to be dynamic menu. The relevant codes are as follows:

Edit: Thank you for your interest.

my English is bad. sorry

1- As you know, the menu in wordpress is made with the newwalker class.

require_once (get_template_directory().'/classes/class-wp-bootstrap-navwalker.php');
    register_nav_menus(array(
        'menu-1' = __( 'Header Menu' ),
        'menu-2' = __( 'Footer Menu' ),
        'menu-3' = __( 'Nav-Tabs Menu' )
    ) );

and:

    ?php 
wp_nav_menu(array(
  'theme_location'      = 'menu-1',
  'depth'               = 2,
  'container'           = 'div',
  'container_class'     = 'collapse navbar-collapse',
  'container_id'        = 'navbarResponsive',
  'menu_class'          = 'navbar-nav ml-auto mr-auto active',
  'fallback_cb'         = 'WP_Bootstrap_Navwalker::fallback',
  'walker'              = new WP_Bootstrap_Navwalker()
));
?

ok up to here

2- How to create tab menu with Bootstrap nav-tabs class. Before the page is refreshed, the specified number of content previews should be shown as you click on the menu elements consisting of categories.

3- 'menu-3' = __( 'Nav-Tabs Menu' ) - I'm trying to create the menu on the line.

4- How can I dynamically adapt the menu structure in the following link to wordpress. How should I match the ids? I don't want it to open a new page when I click on the menu items I created from the categories.

https://getbootstrap.com/docs/4.0/components/navs/

    ul class=nav nav-tabs mt-3 mb-2 id=myTab role=tablist
  li class=nav-item
    a class=nav-link active id=home-tab data-toggle=tab href=#home role=tab aria-controls=home aria-selected=trueGenel/a
  /li
  li class=nav-item
    a class=nav-link id=profile-tab data-toggle=tab href=#profile role=tab aria-controls=profile aria-selected=falseTeknoloji/a
  /li
  li class=nav-item
    a class=nav-link id=contact-tab data-toggle=tab href=#contact role=tab aria-controls=contact aria-selected=falseWeb Tasarım/a
  /li
/ul

div class=tab-content id=myTabContent
  div class=tab-pane fade show active id=home role=tabpanel aria-labelledby=home-tab  
div class=row
    ?php $query = new WP_Query('showposts=3category_name=genel'); ?
    ?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?
      div class=col-sm-12 col-md-6 col-lg-4 mb-4 portfolio-item
       a href=?php the_permalink(); ? class=text-muted
          div class=card-img img-m zoom
            ?php the_post_thumbnail(); ?
          /div
          div class=card-body
            h4 class=?php the_title(); ?/h4
            p class=card-text
              ?php
              $content = get_the_content();
              $content = strip_tags($content);
              echo substr($content,0,175);
              ?
            /p
          /div
          spanDaha Fazla Oku/span/a
      /div
    ?php endwhile; else : ?
    p?php esc_html_e( 'Üzgünüz.. Aradığınız içerik bulunamadı. Diğer sayfaları ziyaret etmenizi tavsiye ederiz.' ); ?/p
  ?php endif; ?
/div
/div
  div class=tab-pane fade id=profile role=tabpanel aria-labelledby=profile-tab
div class=row
    ?php $query = new WP_Query('showposts=3category_name=teknoloji'); ?
    ?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?
      div class=col-sm-12 col-md-6 col-lg-4 mb-4 portfolio-item
       a href=?php the_permalink(); ? class=text-muted
          div class=card-img img-m zoom
            ?php the_post_thumbnail(); ?
          /div
          div class=card-body
            h4 class=?php the_title(); ?/h4
            p class=card-text
              ?php
              $content = get_the_content();
              $content = strip_tags($content);
              echo substr($content,0,175);
              ?
            /p
          /div
          spanDaha Fazla Oku/span/a
      /div
    ?php endwhile; else : ?
    p?php esc_html_e( 'Üzgünüz.. Aradığınız içerik bulunamadı. Diğer sayfaları ziyaret etmenizi tavsiye ederiz.' ); ?/p
  ?php endif; ?
/div
  /div
  div class=tab-pane fade id=contact role=tabpanel aria-labelledby=contact-tab
    div class=row
    ?php $query = new WP_Query('showposts=3category_name=web-tasarim'); ?
    ?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?
      div class=col-sm-12 col-md-6 col-lg-4 mb-4 portfolio-item
      a href=?php the_permalink(); ? class=text-muted
          div class=card-img img-m zoom
            ?php the_post_thumbnail(); ?
          /div
          div class=card-body
            h4 class=?php the_title(); ?/h4
            p class=card-text
              ?php
              $content = get_the_content();
              $content = strip_tags($content);
              echo substr($content,0,175);
              ?
            /p
          /div
        spanDaha Fazla Oku/span/a
      /div
    ?php endwhile; else : ?
    p?php esc_html_e( 'Üzgünüz.. Aradığınız içerik bulunamadı. Diğer sayfaları ziyaret etmenizi tavsiye ederiz.' ); ?/p
  ?php endif; ?
/div
  /div
/div