Question

我是Jquery的新手，所以我不确定我应该使用哪些功能。

我有一个链接列表，如下所示：

<ul class="topmenu">
           <li class="selected"><a href='index.html'>Hem</a></li>
           <li class=""><a href='services.html'>Tjänster </a></li>
           <li class=""><a href='about.html'>Om oss </a></li>
           <li class=""><a href='vaccancies.html'>Lediga jobb </a></li>
           <li class=""><a href='contact.html'>Kontakta oss </a></li>
</ul>

这是我的页脚的一部分，我使用jquery load在我的所有页面中包含此页脚：

$('#footer_include').load('footer.html');

现在，我的问题是我希望能够根据用户当前所在的页面，动态地将“已选择”类设置为我的列表项。因此，如果用户在vaccancies.html上，我希望该列表项的类设置为“已选中”。所以我猜是像

$(document).ready(function () {
     ...
             $(this).addClass('selected');
     ...

});

但正如你所看到的，我的代码是不完整的......有人可以帮助我完成它吗？我想我可能还需要为各个列表项添加ID？

干杯！

Answer 1

添加自定义数据属性

<ul class="topmenu">
    <li data-pathname="/index.html" class="selected"><a href='index.html'>Hem</a></li>
    <li data-pathname="/services.html" class=""><a href='services.html'>Tjänster </a></li>
    <li data-pathname="/about.html" class=""><a href='about.html'>Om oss </a></li>
    <li data-pathname="/vaccancies.html" class=""><a href='vaccancies.html'>Lediga jobb </a></li>
    <li data-pathname="/contact.html" class=""><a href='contact.html'>Kontakta oss </a></li>
</ul>

JQuery的：

$('li[data-pathname="' + window.location.pathname + '"]').addClass('selected');

示例：http://jsfiddle.net/AlienWebguy/CstXK/

如果您想使用PHP设置类，可以这样做：

<?php

  $selected['index']      = ($_SERVER['REQUEST_URI'] == '/index.html')      ? $_SERVER['REQUEST_URI'] : '';
  $selected['services']   = ($_SERVER['REQUEST_URI'] == '/services.html')   ? $_SERVER['REQUEST_URI'] : '';
  $selected['about']      = ($_SERVER['REQUEST_URI'] == '/about.html')      ? $_SERVER['REQUEST_URI'] : '';
  $selected['vaccancies'] = ($_SERVER['REQUEST_URI'] == '/vaccancies.html') ? $_SERVER['REQUEST_URI'] : '';
  $selected['contact']    = ($_SERVER['REQUEST_URI'] == '/contact.html')    ? $_SERVER['REQUEST_URI'] : '';

echo <<<HTML
<ul class="topmenu">
    <li class="{$selected['index']}"><a href='index.html'>Hem</a></li>
    <li class="{$selected['services']}"><a href='services.html'>Tjänster </a></li>
    <li class="{$selected['about']}"><a href='about.html'>Om oss </a></li>
    <li class="{$selected['vaccancies']}"><a href='vaccancies.html'>Lediga jobb </a></li>
    <li class="{$selected['contact']}"><a href='contact.html'>Kontakta oss </a></li>
</ul>
HTML;

当然PHP可以通过数组迭代和substr等来清理，但是你明白了。

Answer 2

$('#footer_include').load('footer.html', function(){
   var p = document.location.toString().split('/');
   var str = p[p.length-1];
   var loc = str.split('?')[0];
   $('#topmenu a[href="' + loc '"]').addClass('selected');
});

我希望这可以帮助

Answer 3

您可以通过将js代码添加到每个页面来引用设置所选页面的代码，因为这是最简单的方法。

$(document).ready(function () {
        // Remove selected from last visited page.
        $(".aclass").removeClass("selected");

        // Set current selected page.
        $(".aclass[href$='index.html']").addClass("selected")
});

其中“aclass”是为每个“<a class='aclass' />”元素添加的类。

Answer 4

根据当前位置检查锚点的href值

http://jsfiddle.net/k3rRN/

$('.topmenu a').each(function() {
    var $that = $(this);

    // check if the anchor href matches the current pathname 
    // then add selected to parent
    if (window.location.pathname.indexOf($that.attr('href')) > -1) {
        $that.parent().addClass('selected');
    }
});

Answer 5

您肯定需要在列表项中添加ID，以便您可以知道哪个标记为已选中。

就识别您所在的页面而言，一种方法是在表示页面的HTML或BODY元素上放置一个id。然后，您可以在页面中查找具有给定ID的元素，并相应地设置所选的列表元素。

如何根据加载的页面使用jquery设置CSS样式？

5 个答案: