Question

我遇到了问题。

我想在相关页面打开时在项目菜单上添加“活动”类。

菜单很简单：

<div class="menu">

<ul>
<li><a href="~/link1/">LINK 1</a>
<li><a href="~/link2/">LINK 2</a>
<li><a href="~/link3/">LINK 3</a>
</ul>

</div>

在jQuery中，我需要检查网址是否为www.xyz.com/other/link1 /

如果是这个，我想添加一个第一类是link1的'a'元素。

我正在尝试很多解决方案，但没有任何效果。

Answer 1

Click here获取jsFiddle中的解决方案

你需要的是你需要获得所提到的window.location.pathname，然后从中创建regexp并根据导航hrefs进行测试。

$(function(){

    var url = window.location.pathname, 
        urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
        // now grab every link from the navigation
        $('.menu a').each(function(){
            // and test its normalized href against the url pathname regexp
            if(urlRegExp.test(this.href.replace(/\/$/,''))){
                $(this).addClass('active');
            }
        });

});

Answer 2

对我来说更简单的方法是：

var activeurl = window.location;
$('a[href="'+activeurl+'"]').parent('li').addClass('active');

因为我的链接转到绝对网址，但如果你的链接是相对的，那么你可以使用：

 window.location**.pathname**

Answer 3

获取LI元素，循环，检查HREF：

$('.menu').find('a').each(function() {
    if($(this).attr('href').indexOf('www.xyz.com/other/link1/')>0) {
          $(this).addClass('active');
    }
})

Answer 4

查看此工作

<强> HTML

<div class="menu">

    <ul>
        <li><a href="~/link1/">LINK 1</a>
        <li><a href="www.xyz.com/other/link1">LINK 2</a>
        <li><a href="~/link3/">LINK 3</a>
    </ul>

</div>

<强> Jquery的

$(document).ready(function(){
    $(".menu ul li a").each(function(){
        if($(this).attr("href")=="www.xyz.com/other/link1")
            $(this).addClass("active");
    })
})

Answer 5

Wasim的回答是从这里发布的一些帖子如宣传的那样：

http://jsfiddle.net/Realto619/jKf3F/1/

Answer 6

在将菜单添加到菜单上的'a'元素时，没有其他“addClass”方法适用于我：

$(function () {
        var url = window.location.pathname,
    urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");  
        $('a').each(function () {
                            if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
                $(this).addClass('active');
            }
        });
    });

我花了四个小时才找到它。

Answer 7

window.location.href将为您提供当前网址（如浏览器地址所示）。解析它并检索相关部分后，您可以将其与每个链接href进行比较，并将active类分配给相应的链接。

Answer 8

使用window.location.pathname并将其与您的链接进行比较。你可以这样做：

$('a[href="~/' + currentSiteVar + '/"').addClass('active');

但首先你必须准备currentSiteVar才能把它放入selecor。

Answer 9

我猜您正在尝试混合使用Asp代码和JS代码，并且在某些时候它正在破坏或不正确地删除绑定调用。

也许您可以尝试使用委托。它将减少何时绑定click事件的复杂性。

一个例子是：

$('body').delegate('.menu li','click',function(){
   var $li = $(this);

   var shouldAddClass = $li.find('a[href^="www.xyz.com/link1"]').length != 0;

   if(shouldAddClass){
       $li.addClass('active');
   }
});

看看是否有帮助，它使用jQuery中的Attribute Starts With Selector。

志

Answer 10

设置活动菜单，他们有很多方法可以做到这一点。现在，我与您分享一种通过CSS设置活动菜单的方法。

    <a href="index.php?id=home">Home</a>
    <a href="index.php?id=news">News</a>
    <a href="index.php?id=about">About</a>

现在，您只需设置$_request["id"] == "home"thìecho "class='active'"，然后我们就可以与其他人一样。

<a href="index.php?id=home" <?php if($_REQUEST["id"]=="home"){echo "class='active'";}?>>Home</a>
<a href="index.php?id=news" <?php if($_REQUEST["id"]=="news"){echo "class='active'";}?>>News</a>
<a href="index.php?id=about" <?php if($_REQUEST["id"]=="about"){echo "class='active'";}?>>About</a>

我认为这对你有用。

Answer 11

这项工作对我来说：D

    function setActive() {
      aObj = document.getElementById('menu').getElementsByTagName('a');
      for(i=0;i<aObj.length;i++) {
        if(document.location.href.indexOf(aObj[i].href)>=0) {
          var activeurl = window.location;
          $('a[href="'+activeurl+'"]').parent('li').addClass('active');
        }
      }
    }

    window.onload = setActive;

Answer 12

<script type="text/javascript">
    jQuery(document).ready(function($) {
    var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); 
    $("#navbar li a").each(function() {//alert('dsfgsdgfd');
    if(urlRegExp.test(this.href.replace(/\/$/,''))){
    $(this).addClass("active");}
});
}); 
</script>

Answer 13

$(function() {
     var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
     $(".nav li").each(function(){
          if($('a',this).attr("href") == pgurl || $('a', this).attr("href") == '' )
          $(this).addClass("active");
     })
});

Answer 14

这对我有用，基本上导航是相同的

<div id="main-menu">
  <ul>
    <li><a href="<?php echo base_url();?>shop">SHOP</a>
    <li><a href="<?php echo base_url();?>events">EVENTS</a>
    <li><a href="<?php echo base_url();?>services">SERVICES</a>
  </ul>
</div>

假设你在网址： http://localhost/project_name/shop/detail_shop/

你希望“SHOP”li链接让课程“活跃”，这样你就可以直观地指出它是主动导航，即使你在“detail_shop”的“商店”的子页面。

javascript：

var path = window.location.pathname;
var str = path.split("/");
var url = document.location.protocol + "//" + document.location.hostname + "/" + str[1] + "/" + str[2];

$('#main-menu a[href="' + url + '"]').parent('li').addClass('active');

str 将获得，project_name，shop，detail_shop
document.location.protocol 将获得 http：
document.location.hostname 将获得 localhost
str [1] 将获得 project_name
str [2] 将获得购物

基本上，这将匹配导航中的链接，其中href属性以“shop”开头（或者辅助目录恰好是什么）。

Answer 15

    let path = window.location.href;
    $('#nav li a').each(function() {
        if (this.href === path) {
            $(this).addClass('activo');
        }else{
            $(this).removeClass('activo')
        }
        
    })

jQuery在菜单上添加class .active

15 个答案: