Question

<div class="nav">
  <ul class="active">
    <li><a class="current" href=index.html>About</a></li>
    <li><a href=portfolio.html>Portfolio</a></li>
    <li><a href=essay.html>Essays</a></li>
    <li><a href=resources.html>Resources</a></li>
    <li><a href=research.html>Research</a></li>
    <li id="last"><a href=contact.html>Contact</a></li>
  </ul>
</div>

我使用CSS将li标记转换为水平列表，并在悬停时更改颜色。

但是，我试图让导航栏显示当前的活动链接，这意味着如果我当前在index.html上，我想要＆＃34;关于＆＃34;使用班级＃34;当前＆＃34;

突出显示li

每当页面是当前页面时，类当前将应用于li。经过一些研究，这是我发现的最接近的东西，但它不起作用。

$document.ready(function(){
    $('.active li').on('click',function(){
        $(this).addClass('.nav .current').sublings().removeClass('active')
    });

以下是这些菜单导航的CSS。

.nav li {
  display:inline;
  margin-right:25px;
  font-size:13px;
  padding-top:6px;
  font-weight:bold;
}

.active li a {
  display: inline-block;
  border-top-style:solid;
  border-top-color:#8D919E; 
  border-top-width: 6px;
  padding-top: 6px;
}


.nav .current {
  color:#30B7E7;
  border-top-color:#30B7E7;
}

我想以某种方式定位.nav .current类并将其添加到li并将其从上一个li中删除。

编辑：我通过HTML找到了一种非常愚蠢的方式。我将类current应用于索引页面的第一个LI in，其余的没有这个类。然后对于第二页，我将类电流应用于该LI，并将其从第一页中删除。它是一个愚蠢的修复，但我不能让任何JS代码出于某种原因工作。

Answer 1

要向与网页网址匹配的项目添加课程，您可以执行此操作 -

var url = window.location.pathname;
var currentPage = url.substring(url.lastIndexOf('/')+1);
$('a[href="' + currentPage + '"]').closest('li').addClass('current active'); // adds highlight to current page element

$('li a').on('click', function(e) {
    e.preventDefault();
    var thisHREF = $(this).attr('href');
    $(this).parent().siblings().removeClass('active');
    $('a[href="' + thisHREF + '"]').closest('li').addClass('active');
});

Answer 2

jquery是错误的。我觉得你有点迷茫。它应该是：

$('.active li').on('click',function() {
    $('.current').removeClass('current');      //<--- Not efficient, but will work
    $(this).children('a').addClass('current'); //<--- You want to add current to a tag?
});

我能看到的三个错误是

$document.ready(function(){有一个结束})？它不在你的例子中。
Sublings是错字
错误地使用addClass('.nav .current')。您未定位自己添加课程的CSS选择器

Answer 3

你也可以这样做：

$('.active li a').on('click', function(e) {
    //prevent the default behaviour of the link 
    //that would have navigated to the next page
    e.preventDefault();
    var currentListEl = $(this).parent("li");//get the a tags parent li
    currentListEl.siblings().removeClass('current');//remove 'current' from its siblings
    currentListEl.addClass('current');//add 'current' to the li

    //navigate to the "current" page or load it with ajax
});

如何定位类的子类（特别添加和删除此类）

3 个答案: