CODEWITHSUNDEEP
jquery
Kasper
Kasper

Reputation: 33

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:left; 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');
    });

});

Upvotes: 0

Views: 3097

Answers (2)

Amir Ismail
Amir Ismail

Reputation: 3883

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

Upvotes: 4

Wintermute
Wintermute

Reputation: 3045

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;}

Upvotes: 0

Related Questions