如何根据加载的页面设置jQuery的CSS样式？

我对Jquery很新，所以我不确定我应该为我的情况使用什么函数。如何根据加载的页面设置jQuery的CSS样式？

我有一个链接列表，像这样：

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

这是我的页脚的一部分，并I'm包括本页脚在我的所有网页使用jQuery负荷：

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

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

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

});

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

干杯！

来源

2011-08-16 Daniel

只是稍微偏离主题的评论说，在这种情况下，最好能够使用服务器端脚本语言，包括href的值如果您有一个可用的页面，则将页脚插入每个页面。 – JJJ

我相信你错误地使用JavaScript，并没有明白它的意思。使用它来初始化页面似乎是错误的（关于停用JS的用户呢？）;所有你想用JS做的事情都应该在服务器端完成，这要归功于脚本语言（例如PHP）。 – darma

好吧，我可以同意，PHP会更好的包括。但是如何使用PHP动态设置CSS类？ – Daniel

添加自定义数据属性

<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等来清理，但你明白了。

来源

2011-08-16 15:13:47 AlienWebguy

非常感谢给我的代码为jQuery和PHP！我想我会用这个PHP去！ – Daniel

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

我希望这能帮助

来源

2011-08-16 15:11:32

-2

你一定会需要ID添加到列表中的项目，这样就可以知道所选择添加标记其中之一。

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

来源

2011-08-16 15:11:50 cdeszaq

你需要什么ID？另请参阅@SenadMeškin的回答。 – feeela

@feeela - 是的，我现在明白了。但是，如果不诉诸解析URL（也许它更复杂？），那么将一个令牌标识符放入页面会快得多。 – cdeszaq

取决于你的“更快”的定义，但我不会在乎几毫秒。 – JJJ

您可以通过将您的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' />” 元素的类。

来源

2011-08-16 15:12:37 Ahmed

检查锚兑当前位置

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

来源

2011-08-16 15:38:30 MikeM

如何根据加载的页面设置jQuery的CSS样式？

回答

相关问题