Question

我正在尝试制作jQuery菜单，它可以突出显示当前页面。方法是，在选中时添加类current。

这是html：

<div class="menu_items">
<ul class="ul_items" id="navigation">
    <li><a href="index.php">1</a></li>
    <li><a href="index.php?pg=2">2</a></li>
    <li><a href="index.php?pg=3">3</a></li>
    <li><a href="index.php?pg=4">4</a></li>
    <li><a href="index.php?pg=5">5</a></li>             
</ul>
</div>

我试图做出类似的事情：

$(document).ready(function(){
    $("#navigation").find("a[href*='"+window.location.href+"']").each(function(){
            $(this).addClass("current")
    });
});

由于CSS代码很大等，完整代码位于jsFiddle

我认为在Jquery部分代码中没有正确定义某些东西。当我尝试这个时：

var a = $("#navigation").find("a[href*='"+window.location.href+"']");
alert(a);

我得到[Object] [Object]警报。有人可以帮忙吗？

提前致谢。

Answer 1

jQuery方法总是返回一个jQuery对象。如果您想查看其中的内容，请尝试.length查看匹配的元素数量，并[0]访问各个DOM节点。甚至更好 - console.log它可以让你轻松地检查其中的所有内容。

您的问题是location.href返回整个网址（http://...）而您的链接不包含该网址。您可以使用location.pathname来获取路径，但突出显示当前页面的真正正确方法是在服务器端执行此操作。没有理由将JS用于这样的事情。

Answer 2

马蒂是真的。但你可以尝试的是split（）方法来获得与href匹配的精确值。

工作示例：http://jsfiddle.net/ylokesh/AqmHr/2/

<script>
$(document).ready(function() {

    //capture URL
    //var tempURL = window.location.href; 

    var tempURL = "http://www.websiteurl.com/index.php?pg=2"
    var urlMatch = tempURL.split('.com')[1].split('/')[1];
    var hrefVal = $("#navigation a:eq(1)").attr('href');
    $("#navigation").find("a[href='"+hrefVal+"']").html('Current Page');
});
</script>

Answer 3

//var url = 'file://one/two/three/index.php?pg=2'; // use this if testing on desktop
var url = window.location.href;
var filepath = url.lastIndexOf("/") + 1;
var matchThis = url.substr(filepath);
$('#navigation').find("a[href*='"+matchThis+"']").addClass('current');

无需.each

信用 - https://stackoverflow.com/a/1302339/3377049

jQuery当前页面通过.find（）和.each（）函数

3 个答案: