如果导航链接与 page_id 匹配,则更改颜色

发布于 2024-10-29 09:26:57 字数 1217 浏览 1 评论 0原文

好的,这是我的导航设置,

<div id="headerMenu">
            <ul>  
                <li style="width:147px"><a href="/?page_id=92" class="menuHov"><span>ABOUT<br/>ABOUT</span></a></li>
                <li style="width:186px"><a href="/?page_id=64" class="menuHov"><span>STOCKISTS<br/>STOCKISTS</span></a></li>
                <li style="width:146px"><a href="/?page_id=96" class="menuHov"><span>PRESS<br/>PRESS</span></a></li>
                <li style="width:128px"><a href="/?category_name=blogs" class="menuHov"><span>BLOG<br/>BLOG</span></a></li>
                <li style="width:70px"><a href="/?page_id=89 " class="menuHov"><span>CONTACT<br/>CONTACT</span></a></li>
            </ul>

我需要一个 jquery 脚本来识别 page_id 变量和 href,如果它们相同,请更改颜色...如果您需要更多信息,请告诉我...

这是我迄今为止尝试过的。

 $(document).ready(function() {
    $('a.menuHov[href$=' + window.location.pathname + ']').css('color', '#fae349');
});

但这改变了一切,因为我猜它不能将 href 识别为路径名

ok so heres my nav setup

<div id="headerMenu">
            <ul>  
                <li style="width:147px"><a href="/?page_id=92" class="menuHov"><span>ABOUT<br/>ABOUT</span></a></li>
                <li style="width:186px"><a href="/?page_id=64" class="menuHov"><span>STOCKISTS<br/>STOCKISTS</span></a></li>
                <li style="width:146px"><a href="/?page_id=96" class="menuHov"><span>PRESS<br/>PRESS</span></a></li>
                <li style="width:128px"><a href="/?category_name=blogs" class="menuHov"><span>BLOG<br/>BLOG</span></a></li>
                <li style="width:70px"><a href="/?page_id=89 " class="menuHov"><span>CONTACT<br/>CONTACT</span></a></li>
            </ul>

i need a jquery script to recognize the page_id variable and the href and if they're the same, change color... let me know if you need anymore info...

heres what i tried so far.

 $(document).ready(function() {
    $('a.menuHov[href$=' + window.location.pathname + ']').css('color', '#fae349');
});

but that changes everything because i guess it doesn't recognize the href as a pathname

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

尽揽少女心 2024-11-05 09:26:57
$(function(){
    var page_id = getParameterByName("page_id");
    $("a.menuHov[href$=" + page_id + "]").css('color', '#fae349');
})

包含此处的查询字符串解析器

function getParameterByName( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}
$(function(){
    var page_id = getParameterByName("page_id");
    $("a.menuHov[href$=" + page_id + "]").css('color', '#fae349');
})

Include the query string parser from here

function getParameterByName( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}
淡淡的优雅 2024-11-05 09:26:57

我认为问题出在正斜杠/?在网址中。
尝试一下它应该可以工作:

$(document).ready(function() {     
   $('a.menuHov[href$="' + window.location.pathname + '"]').css('color', '#fae349'); 
}); 

工作示例@jsfiddle: http://jsfiddle.net/CeZCY/8/

I think the problem is with the forward slash/? in the URL.
Try this it should work:

$(document).ready(function() {     
   $('a.menuHov[href$="' + window.location.pathname + '"]').css('color', '#fae349'); 
}); 

Working example @ jsfiddle: http://jsfiddle.net/CeZCY/8/

感受沵的脚步 2024-11-05 09:26:57
$(document).ready(function() {
     var link = window.location;
     var t_arr = new Array();
     t_arr = link.split('/');
     $("a.menuHov[href$='"+t_arr[1]+"']").css('color', '#fae349');     
});

可以吗?

$(document).ready(function() {
     var link = window.location;
     var t_arr = new Array();
     t_arr = link.split('/');
     $("a.menuHov[href$='"+t_arr[1]+"']").css('color', '#fae349');     
});

Is it okay?

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文