Question

我真的很难将类激活添加到包含该网站当前页面的li。网址= http://polissagethibodeau.com/

以下是相关的HTML

<nav class="nav">
    <ul class="sf-menu">
        <li id="home">
            <a href="./">Home</a>
        </li>
        <li>
            <a href="./about.php">About us</a>
        </li>
        <li>
            <a href="./services.php">Services</a>
            <ul>
                <li>
                    <a href="./services.php#passenger">Car, Truck and Vans</a>
                </li>
                <li>
                    <a href="./services.php#large">Semi, Boats, RV and Busses</a>
                </li>
                <li>
                    <a href="./services.php#air">Airplanes and Helicopters</a>
                </li>
                <li>
                    <a href="./services.php#polishing">Aluminum and Plexiglass polishing</a></li>
            </ul>
        </li>
        <li>
            <a href="./photo.php">Photos</a>
        </li>
        <li>
            <a href="./contact.php">Contact Us</a>
        </li>
    </ul>
</nav>

CSS我想申请

.sf-menu > li.active > a {
  background: #c2e078;
}

这是我试图使用的脚本没有成功。

$(function() {
    var path = window.location.pathname.substring(1);
    $('.nav>li>a[href="' + path + '"]').parent().addClass('active');
});

Answer 1

使用if语句检查它是否在url中：

SELECT c.priceCodePosition, c.pricePosition, c.model_idPosition
FROM csvdata c
LEFT JOIN pricecodes p
   ON c.model_idPosition = p.Code
WHERE c.model_idPosition IS NULL 
   OR c.model_idPosition NOT IN (SELECT p.prices FROM onPriceList)

Answer 2

因为每个链接的HREF属性都等于完整的URL，而不仅仅是file.php

您可以使用$=运算符来解决此问题，这意味着（结束于）

在DEMO中注意我将var路径分配更改为services.php，以便它可以在代码段中使用。

此外，使用$(document).ready(function() {触发器正确地向事件添加侦听器

注意我意识到此示例会导致services.php的所有链接都添加了类active。为了解决这个问题，请为导航栏中的每个链接分配一个名为navlink的自定义类，然后使用

$('.navlink[href$="' + path + '"]:parent').addClass('active');

$(document).ready(function() {
//var path = window.location.pathname.substring(1);
  var path = 'services.php#large';
$('a[href$="' + path + '"]:parent').addClass('active');
});

.active {
     font-size: 1.75em;
     
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
                    <ul class="sf-menu">
                        <li id="home">
                            <a href="./" >Home</a>
                        </li>
                        <li>
                            <a href="./about.php">About us</a>
                        </li>
                        <li>
                            <a href="./services.php">Services</a>
                            <ul>
                                <li>
                                    <a href="./services.php#passenger">Car, Truck and Vans</a>
                                </li>
                                <li>
                                    <a href="./services.php#large">Semi, Boats, RV and Busses</a>
                                </li>
                                <li>
                                    <a href="./services.php#air">Airplanes and Helicopters</a>
                                </li>
                                <li>
                                <a href="./services.php#polishing">Aluminum and Plexiglass polishing</a></li>
                            </ul>
                        </li>
                        <li>
                        <a href="./photo.php">Photos</a>
                        </li>
                        <li>
                            <a href="./contact.php">Contact Us</a>
                        </li>
                    </ul>
                </nav>

Answer 3

$(document).ready(function () {
    // Get previously stored url
    if (sessionStorage.getItem("active-class-url"))
    {
        strLastUrl = sessionStorage.getItem("active-class-url");
        $('.nav > li >a[href="' + strLastUrl + '"]').parent().addClass('active');
    }
});
$(document).on(".nav > li > a", "click", function () {
    // Remove active class from all ancher tag
    $(".nav > li > a").parent("li").removeClass('active');
    // Add active class to currenly clicked acnher tag
    $(this).parent("li").addClass('active')
    // Store value of active calss url. So on page refresh you can get it
    sessionStorage.setItem("active-class-url", $(this).attr("href"));
})

Answer 4

问题是你的选择器。

而不是：

$(".nav > li > a")

使用此：

$(".nav > ul > li > a")

同时删除路径前的.（点），这样就可以了：

$(document).ready(function() {
   var pathname = window.location.pathname;
   $(".nav > ul > li > a").each(function() {
     var $this = $(this);
     if ($this.attr("href") === pathname) {
       $this.parent().addClass("active");
     }
   });
 });

测试：

Answer 5

你可以通过两种或多种方式来做到这一点。示例项目来源LINK

<强> 1 ----

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

<强> 2 ----

这是代码，如果你想使用普通的javascript

function setActive() {
  aObj = document.getElementById('nav').getElementsByTagName('a');
  for(i=0;i<aObj.length;i++) { 
    if(document.location.href.indexOf(aObj[i].href)>=0) {
      aObj[i].className='active';
    }
  }
}

window.onload = setActive;

第3 ----

function setActive() { $('#nav').find('a').each(function () { //console.log(document.location.href) if (document.location.href == "http://......" + $(this).attr('href')) { $(this).parents("ul").removeClass("hidden-ul"); $(this).parents().addClass("active"); } }); } window.onload = setActive;

Answer 6

＆＃13;

$(document).ready(function() {
var url = window.location.toString();
$('#home a').attr('href',url)
$('#home a').text(url)
      $('ul.sf-menu a').filter(function() {
        if (this.href != '') {
          if (this.href == url) {
          console.log(this.href)
          console.log(url)
            $(this).addClass('active');
          }
        }
      });
});

＆＃13;

.active {
  color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
  <ul class="sf-menu">
    <li id="home">
      <a href="./">Home</a>
    </li>
     <li id="stacksnippets">
      <a href="https://stacksnippets.net/">stacksnippets</a>
    </li>
  </ul>
</nav>

＆＃13;

尝试上述方法我希望它可以帮到你。

根据网址为nav li添加活动类？

6 个答案:

测试：