Move from one Tab to another after clicking Achor Tag using jQuery

Hi msutwana19,

You need to write URL of the page where you want to redirect as shown below.

The URL must be in the following format.

URL = PageName + . + Extension of the file

<a id="Products" href="tab1.aspx">get Products</a>

 Here is the working sample. You can also download the sample zip.

HTML (Home Page)

<div id="Producttabs">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a id="Products" href="tab1.aspx">get Products</a></li>
        <li><a data-toggle="tab" id="Suppliers" href="tab2.aspx">Suppliers</a></li>
        <li><a data-toggle="tab" id="Payment" href="tab3.aspx">Product Payment</a></li>
        <li><a data-toggle="tab" id="Delivery" href="tab4.aspx">Product Delivery</a></li>
    </ul>

    <div class="tab-content">
        <div id="tab1" class="tab-pane in active">
            <p>Content goes here</p>
        </div>
        <div id="tab2" class="tab-pane ">
            <p>Content goes here</p>
        </div>
        <div id="tab3" class="tab-pane ">
            <p>Content goes here</p>
        </div>
        <div id="tab4" class="tab-pane ">
            <p>Content goes here</p>
        </div>
    </div>
</div>

jQuery JavaScript

<script type="text/javascript">
    $(document).ready(function () {
        $.fn.dataTable.moment('DD-MM-YYYY');
        try {
            $('#tblacknowledge').dataTable({
                "pageLength": 6,
                "autowidth": true,
                "processing": true,
                "bserverSide": true,
                "order": [[1, "desc"]],
                "ajax": {
                    "url": "/Manufacturing/Products/getproduct",
                    "type": "GET",
                    "dataType": "json"
                },
                "columns": [
                    { 'data': 'ProductID' },
                    { 'data': 'ProductName' },
                    {
                        'data': null,
                        "render": function (data, type, row) {

                            var tabId = $(this).data('tab'); // Extract tab ID from data-tab attribute
                            var tabIndex = $("#myTab a[href='" + tabId + "']").parent().index(); // Get index of tab
                            return '<a id="AcknowledgeReceiptLink" class="tab-link"  data-tab="' + tabId + '"  href=""/Manufacturing/Products/getproduct?ProductID=' + row.ProductID + '&userId=' + row.UserId + '&ProductName=' + row.ProductName + '">Recieve Product</a>';
                        }
                    }
                ]
            })
        }
        catch (err) {
            alert(err.stack);
        }
        $(".tab-link").on('click', function (e) {
            e.preventDefault(); // 
            var tabId = $(this).data('tab');
            $("#Producttabs").tabs("option", "active", $(tabId).index());
        });
</script>

HTML (Redirect Pages)

tab1.aspx

<h3>This is Get Product Page.</h3>

tab2.aspx

<h3>This is Get Suppliers Page.</h3>

tab3.aspx

<h3>This is Product Payment Page.</h3>

tab4.aspx

<h3>This is Product Delivery Page.</h3>

Screenshot

Have you tried the given solution?

Please let me know.