Load first category on landing page by default

Question

the question is simple but I and new and don't know how to do this.

So, I have categories in my database which I already show on the page, like this

<?php
     foreach ($categories as $cat) {
         if ($cat == false)
               continue;
?>
     <li>
          <a href="topic?tag=<?php echo $cat['word']?>"><?php echo $cat['word']?></a>
     </li>
<?php }?>

And the JS with which I highlighting the selected category

$(document).ready(function(){ 
    var active = 0;
    for (var i = 0; i < document.links.length; i++) {
         if (document.links[i].href === document.URL) {
              active = i;
         }
    }
    document.links[active].className = 'active';    
})

Everything works fine but when I try to open the page with all categories I want to select first category by default and load items only from that category.

Can anyone help me in solving this problem?

Note: categories are populated dynamically in database and I don't know what name of category will be first.

Answer 1

Give the li a category css class, then do this:

$('li.category:first-child').addClass('active'); 

Then set a CSS class rule for .active :

li.category.active {
    color: green; // or whatever
}

Answer 2

Use trigger of jquery.

1. First give unique id to anchor tag

like

<a id="cat_<?php echo $cat['word']?>" href="topic?tag=<?php echo $cat['word']?>"> 
    <?php echo $cat['word']?>
</a>

2. Then trigger click event on the first link using id

    $(document).ready(function(){ $('#cat_<?php $categories[0]['word'];?>')[0].click(); }); 

Hope this work!