Make link active when page load

Okey i got these links and its working fine whit the add and remove class. But how do i make one of the links active when im loading the page so you can se whits page you'r on ?

HTML:

<ul>

    <li class="red btn"><a href="#tildig">link</a></li>
    <li class="blue btn"><a href="#kontakt">link</a></li>  

</ul>

CSS:

.red.btn { float:l开发者_运维问答eft; margin: 0 0 0 5px ; width: 41%; height:30px; background-image:url(../image/rod_bnt.png);}

.red.btn.active { background-image:url(../image/rod_bnt_pil.png); height: 40px; }

.blue.btn {float:right; margin:0 5px 0 0; height:30px; width: 41%; background-image:url(../image/blaa_bnt.png); }
.blue.btn.active { background-image:url(../image/blaa_bnt_pil.png); height: 40px;}

Script:

<script type="application/x-javascript">
$(function() {
    $('li.btn').click(function(){
        // Add "active" to the clicked element and
        // get all siblings and remove "active" from them
        $(this).addClass('active').siblings().removeClass('active');
    });

});

Try this

$('li').each(function(){
    if(window.location.href.indexOf($(this).find('a:first').attr('href'))>-1)
    {
    $(this).addClass('active').siblings().removeClass('active');
    }
});

Here I loop over all lis and I assumed that the text the a tag is a part of the page url. of course you can modify your selector to get 'em

How about not doing it with JS at all? Add an ID to your body tag on each page, and you can do something like:

#body-red .btn.red { background-image:url(../image/rod_bnt_pil.png); height: 40px; }
#body-blue .btn.blue { background-image:url(../image/blaa_bnt_pil.png); height: 40px;}