I have a tab table defined below:

<div id="tabs">
    <ul class="nav nav-tabs">
        <li id="F1" class="active"><a data-toggle="tab" class="nav_link" data_id="1" href="#tab1">Honda</a></li>
        <li><a data-toggle="tab" class="nav_link" data_id="2" href="#tab2">Subaru</a></li>
    </ul>
 </div>

There is another button called "Refresh", when click Refresh button, I want to click the first tab above,

This is what I did:

$(function () {
        $("#RefreshBtn").click(function () {
            alert("click here");
             $('#F1').click(); 
            
        });
    })

I go the alert event above, but the first tab doesn't click,

I also removed id="F1", and changed the code as this:

$('#tabs li > a[data_id=1]').click(); //tested in other project , works fine.

But this code doesn't work either, I used this code in other place, it works fine,

Does anybody know what is the problem?