Question

Okey我得到了这些链接，它的工作正常，添加和删除类。但是，当我加载页面时，如何使其中一个链接处于活动状态，这样你就可以选择你的页面？

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

});

Answer 1

试试这个

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

在这里，我循环遍历所有li，我认为a标记的文本是页面网址的一部分。当然你可以修改你的选择器来获得'em

Answer 2

根本不用JS做这件事怎么样？在每个页面上为您的body标签添加ID，您可以执行以下操作：

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

页面加载时激活链接

2 个答案: