How to insert active class in tabs dynamically (like in bootstrap tabs)

im trying to display data from database in tabs form.
Page title in tab title and when user click on tab title it display its corresponding content in tab-content

<!-- tab-title -->
<ul class="page-title">
    <?php
        //getting parent page title from database
        //Query by id

        //defining $i for data-bs-target for id target in tab-content
        $i = 1; 
        //fetching data with while loop and getting primary key (id)
        $parent_id = $rows->id;
    ?>
    <li class="dropdown">
        <!-- data-bs-target to link tab title with tab-conten id -->
        <a class="menu-link main-link" data-bs-target="<?php echo $i; ?>">
            <!-- display parent-title  -->
            <?php echo $rows->page_title;?>
        </a>
        
        <!-- displaying child page title -->
        <ul class="sub-menu list-unstyled px-3 py-2">
            <?php
                //displaying child page title only foreign key in child table match with id from parent table
                //query where child page foreign id match with parent page primary key
                //fetching data with while loop
            ?>      
            <li class="menu-item">
                <!-- data-bs-target to link tab title with tab-conten id -->
                <a  class="menu-link" data-bs-target="<?php echo $i; ?>">
                    //displaying child title in match of foreign key with primay key of parent page
                    <?php echo $child_rows->child_title;?>
                </a>
            </li>
            <!-- while loop for child page ends -->
        </ul>
    </li>
    <!-- while loop ends for parent page     -->
</ul>

Tab-content

<!-- tab-content -->
<div class="content-wrap py-0">
    <?php
        $child_data = $conn->prepare("SELECT * FROM children_page WHERE parent_id = :parent");
        $child_data->bindParam(':parent', $parent_id);

        //parent table
        $data = $conn->query("SELECT * FROM parent_page ORDER BY id DESC");
        $p=1;
        while($rows = $data->fetch(PDO::FETCH_OBJ) ):
            $parent_id = $rows->id;
    ?>
       <!--active class should added to page-section -->
        <div  class="page-section" id="<?php echo $p; ?>">
            <?php 
                //chlidren table
                $child_data->execute();
                if ($child_data->rowCount()) {
                    // parent has children
                    while($child_rows = $child_data->fetch(PDO::FETCH_OBJ) ): 
                    echo $child_rows->child_content;
            ?>

            <?php endwhile;
                }else{
                    echo $rows->page_content;
                }
            ?>
        </div>
    <?php $p++; endwhile;?>
</div>

Now Js for tab-title and Tab-content to interlink and work on click

$(".menu-link").on("click",function(){
        var dataValue= $(this).attr("data-bs-target");
        var dataValueArr = dataValue.split("#");
        var dataValuePosition= dataValueArr[1];
        
        $(".page-section").removeClass("active")
        
        $('.page-section').each(function() {
            aa = this.id;
            if(aa.match(dataValuePosition)){        
            if($i==0){          
                $(`#${dataValuePosition}`).addClass("active")
                }
                var headerHeight = $(".onzlogo").height();
                var sliderHeight = $(".slider-element").height()
                var totalHeight = headerHeight+sliderHeight;
                window.scrollTo({
                        top: totalHeight,
                        left: 0,
                        behavior: 'smooth'
                });
            }
          })
    })

menu-link is tab-title and page-section is tab-content when user click on menu-link (tab-title) active class should be add to page-section(tab-content)

Above js code work fine with static code but with mysqli code im unable to insert active class.

how can i insert active class dynamically in loop to selected page-section(tab-content) only.

It adding active class on click working fine on click but i want by deafult i want to active class on first child.

$(".menu-link").on("click",function(){
	var dataValue= $(this).attr("data-bs-target");
	
	$('.page-section').each(function() {
		aa = this.id;
		//console.log(this.id);
		if(aa.match(dataValue)){	
		    //$(`#${dataValuePosition}`).removeClass("active")	
		    $(".page-section.active").removeClass("active")
			$(`#${dataValue}`).addClass("active")
		}
	  })
})

solved adding active class on first child as well as on click add/remove active class

1 Like