Using tabs and stay on same tab using links for order(sql)

function open tabs (openpage)

    function openPage(pageName,elmnt,color) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        tablinks = document.getElementsByClassName("tablink");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].style.backgroundColor = "";
        document.getElementById(pageName).style.display = "block"; = color;

    // Get the element with id="defaultOpen" and click on it

I have 3 tables inside of each tab

-button class=“tablink” onclick=“openPage(‘all’, this, ‘aquamarine’)” id=“defaultOpen”>All</button-
-button class=“tablink” onclick=“openPage(‘only active’, this, ‘aquamarine’)” >Acitve</button-
-button class=“tablink” onclick=“openPage(‘not active’, this, ‘aquamarine’)”>Non Active</button-

But I want order by name or by date on second or third tab and keep it open,

<th width="50" bgcolor="#F3EFEF" style="color: #272727" scope="col" ><a href="index.php?home=<?php echo $search_by;?>&ap=<?php echo $search_ap;?>&d=date" onclick= onclick="openPage('not active', this, 'aquamarine')">Date</th>

but not work always go to default page.

Buttons works good


I found one solution using php for default open tab.

For first tab
If(empty($_GET[‘tab’])){echo "id=‘defaultOpen’;}
For others
If(isset($_GET[‘tab’]&&$_GET[‘tab’]==‘tab2’ )){echo "id=‘defaultOpen’;}