Home/ Questions/Q 6863055
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T02:44:09+00:00

I’m trying to make tabs and am using easytabs. By the below code, the

  • 0

I’m trying to make tabs and am using easytabs. By the below code, the second option is the default selected tab.

I want the first tab to be selected as an active tab. I did it before, but unfortunately I missed the file. Now I am struggling to do it again. Please tell me how to make the first tab (statistics) to be selected at first as a default tab. Now the second tab which (followup) is the default selected tab.

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 
    <head profile="http://gmpg.org/xfn/11"> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  <script src="js/ajax_request.js" type="text/javascript"></script> 

        <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script> 
        <script src="js/jquery.hashchange.min.js" type="text/javascript"></script>
        <script src="js/jquery.easytabs.min.js" type="text/javascript"></script>

<script src="js/jquery.maskedinput.js" type="text/javascript" charset="utf-8"></script>
        <style> 
            #tab-container { border: solid 0px; height: auto; }
            #tab-container ul { margin: 0; padding: 0; }
            #tab-container ul li { display: inline-block; background:#464646 ; border:  1px; border-bottom: none; font-color:#000000;}
            #tab-container ul li a { display: block; padding: 5px; outline: none; }
            #tab-container ul li a:hover { text-decoration: none;background-color:#30A4B1; }
            #tab-container ul li.active-tab {   padding-top: 6px; position: relative; top: 1px; font-color:#000000; }
            #tab-container ul li a.active-tab { font-weight: bold;position:relative; }
            #tab-container .panel { border: ; padding: 0 10px; }
            #tab-container ul li a.active { background-color:#30A4B1; color:#ffffff; }

        </style>
        <script type="text/javascript"> 
          $(document).ready(function(){ $('#tab-container').easytabs({
            updateHash: false,
            tabActiveClass:'active',


          }); });
</script>         
    </head>
<body>
        <div id="tab-container"  >
        <ul style="float:right;">
        <li><a href="" data-target="#tab2">Statistics
    </a>        
        </li>           
        <li><a href="" data-target="#that-other-tab">Followup
                <span class="notification-bubble" title="Notifications" style="background-color: rgb(239, 51, 14); display: inline;" id="countOrder"><?php echo $countOrder;?></span>           
        </a>        
        </li>       
        <li><a href="" data-target="#pay-tab" class="tabs">Payment</a></li>
           </ul><br/><br/><hr/>

        <div class="panel-container">
        <div id="tab2">
            <iframe src="charts/chart_main.php" width="100%" height="1000px" scrolling="no" style="border:0px; margin:0px;">
                </iframe>
                </div>

            <div id="that-other-tab">
            <iframe src="followup/follow_grid.php" width="100%" height="500px" scrolling="no" style="border:0px; margin:0px;">
                </iframe>
                </div>
                                <div id="pay-tab">
            <iframe src="pay_grid.php" width="100%" height="500px" scrolling="no" style="border:0px; margin:0px;">
                </iframe>
                </div>      
          </div>
        </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have a bunch of different classes, but from the looks of it you can just remove the active class from the second tab and then add the active class to the first tab. Simple stuff 🙂

    Hope this helps.

    Edit —

    I think i just figured out something in this plugin. You want it to be on the first tab even when you refresh the page, correct? If so, you just need to turn the updateHash setting to false. Replace your current <script> with this:

    <script type="text/javascript"> 
$(document).ready(function() {
    $('#tab-container').easytabs({
        animate: false,
        tabActiveClass: 'active',
        updateHash: false
    });
});
</script>

    I hope this helps!

    • 0