Question

类似的问题已经得到解答，但我在自己的代码中实现它们时遇到了麻烦：

基本上，如果锚标记与用户所在的当前页面匹配，我正试图弄清楚如何将类添加到锚标记。我有三个html页面 - 索引，关于和联系人。它们都有相同的导航栏。

-----------------------------------的index.html --------- -------------------------------------------------- -----------

 <nav class="navbar navbar-inverse navbar-fixed-top"><!-- navbar begings -->
    <div class="container">
        <div class="navbar-header">
            <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-nav-demo" data-toggle="collapse" type="button">
                <span class="sr-only">Toggle navigation</span>
            </button>
            <a class="navbar-brand" href="http://vetamuse.com">Manuel Stoilov</a>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a class="navAnchor" href="about.html">About |</a></li>
                <li><a class="navAnchor" href="contact.html">Contact |</a></li>
            </ul>
        </div>
    </div>
</nav>

----------------------------------- About.html --------- -------------------------------------------------- -----------

 <nav class="navbar navbar-inverse navbar-fixed-top"><!-- navbar begings -->
    <div class="container">
        <div class="navbar-header">
            <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-nav-demo" data-toggle="collapse" type="button">
                <span class="sr-only">Toggle navigation</span>
            </button>
            <a class="navbar-brand" href="http://vetamuse.com">Manuel Stoilov</a>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a class="navAnchor" href="about.html">About |</a></li>
                <li><a class="navAnchor" href="contact.html">Contact |</a></li>
            </ul>
        </div>
    </div>
</nav>

----------------------------------- Contact.html --------- -------------------------------------------------- -----------

 <nav class="navbar navbar-inverse navbar-fixed-top"><!-- navbar begings -->
    <div class="container">
        <div class="navbar-header">
            <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-nav-demo" data-toggle="collapse" type="button">
                <span class="sr-only">Toggle navigation</span>
            </button>
            <a class="navbar-brand" href="http://vetamuse.com">Manuel Stoilov</a>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a class="navAnchor" href="about.html">About |</a></li>
                <li><a class="navAnchor" href="contact.html">Contact |</a></li>
            </ul>
        </div>
    </div>
</nav>

在我的CSS中，我的.navAnchors被syled了。我还想将类.current添加到与用户当前所在页面匹配的锚标记。

---------------------------------- index.css ---------- -------------------------

  .navbar-collapse > .nav > li > a:link, 
  .navbar-collapse > .nav > li > a:visited
{ 
    color: #95a1aa;
    font-size: 15px;
}

.current {
  color: pink;
}

我目前正在JavaScript中尝试此功能，但它不起作用：

------------------------ index.js -------------------- ---

var path = window.location.pathname.split("/").pop();
var link = $(".navAnchor");

window.setInterval(function(){
  for(var i = 0; i < 2; i++) {  //2 refers to the number of links on nav page (about and contact)
    if(path === link.eq(i).attr('href')){
        link.eq(i).addClass("current");   
    }
   }
}, 5000);

页面的链接是：（index.html）https://preview.c9users.io/manistoi/vetamuse/vetamuse/v3/index.html?_c9_id=livepreview8&_c9_host=https://ide.c9.io

（about.html）https://preview.c9users.io/manistoi/vetamuse/vetamuse/v3/about.html

（contact.html）https://preview.c9users.io/manistoi/vetamuse/vetamuse/v3/contact.html 任何帮助或提示都表示赞赏!!

-------------------------------------- EDIT -------- -------------------------------------

以下适用于我（在我的javascript标签中）

$(document).ready(function(){
  var path = window.location.pathname.split("/").pop();

  $(".navAnchor").each(function(){
    if($(this).attr('href') == path){
      $(this).css("color", "black");
      $(this).css("font-weight", "bold");
    }
  })
})

Answer 1

您希望当前班级位于li - 而不是a。迭代你的navlink a并检查href以及它是否与你的路径变量匹配 - 将当前类添加到a的父级（li）。但是 - 如果你决定在a上使用Current类 - 只需要代码中的parent（），它应该可以正常工作。另外 - 只是注意到您的页面标有大写字母 - 但您的href是小写的 - 例如：About.html vs about.html。这些将需要是相同的情况。

$(document).ready(function(){
  var path = window.location.pathname.split("/").pop();

  $(".navAnchor").each(function(){
    if($this).attr('href') == path){
      $(this).parent().addClass('current');
    }
  })
})

向课程用户添加课程的功能目前在

1 个答案: