Question

我基本上有一个带有几个链接的侧栏导航。我希望能够根据我所在的页面突出显示相应的链接。

由于某些原因，我的代码似乎不起作用。

这是html文件：

<div class='sidebar'>
                <div class='title'>
                    Sonder
                </div>
                <ul class='nav'>
                    <li><a class='active' href='members.php?view = <?=$user?>'>Home</a></li>
                    <li><a href='members.php' >Members</a></li>
                    <li><a href='friends.php' >Friends</a></li>
                    <li><a href='messages.php'>Messages</a></li>
                    <li><a href='profile.php'>Edit Profile</a></li>
                    <li><a href='logout.php'>Logout</a></li>
                </ul>
            </div>

这是css的一部分：

.nav li a {
    position: relative;
    display: block;
    padding: 15px 15px 15px 50px;
    font-size: 12px;
    color: #eee;
    border-bottom: 1px solid #222;
    cursor: pointer;
}

.nav li a:before {
    font: 14px fontawesome;
    position: absolute;
    top: 14px;
    left: 20px;
}
.nav li:nth-child(1) a:before {
    content: '\f015';
}

.nav li:nth-child(2) a:before {
    content: '\f0c2';
}

.nav li:nth-child(3) a:before {
    content: '\f183';
    left: 23px;
}

.nav li:nth-child(4) a:before {
    content: '\f003';
}

.nav li:nth-child(5) a:before {
    content: '\f013';
}

.nav li:nth-child(6) a:before {
    content: '\f023';
    left: 22px;
}

.nav li a:hover {
    background: #444;
}

.nav li a.active {
    box-shadow: inset 5px 0 0 #5b5, inset 6px 0 0 #222;
    background: #444;
}

这是javascript代码：

$(document).ready(function() {
   setNavigation();

});

function setNavigation() {
    var path = window.location.pathname;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);

    $(".nav a").each(function () {
        var href = $(this).attr('href');
        if (path.substring(0, href.length) === href) {
            $(this).closest('li').addClass('active');
        }
    });
}

Answer 1

您的代码中存在一些问题。

path JS变量具有前面的正斜杠，即/members.php或/friends.php。因此，path.substring(0, href.length)部分的返回方式与/members.ph一样，与页面中的任何href都不匹配。
突出显示菜单的活动类位于anchor标记元素上，而不是根据您编写的CSS在li标记元素中，但是在JS中，您尝试将活动类添加到li中。 / p>

这是一个完整的代码片段：

<强> HTML：

    <div class='sidebar'>
        <div class='title'>Sonder</div>
        <ul class='nav'>
            <li><a class='active' href='members.php?view=<?=!empty($user)?:0?>'>Home</a></li>
            <li><a href='members.php' >Members</a></li>
            <li><a href='friends.php' >Friends</a></li>
            <li><a href='messages.php'>Messages</a></li>
            <li><a href='profile.php'>Edit Profile</a></li>
            <li><a href='logout.php'>Logout</a></li>
        </ul>
    </div>

<强> CSS：

    .nav li a {
        position: relative;
        display: block;
        padding: 15px 15px 15px 50px;
        font-size: 12px;
        color: #eee;
        border-bottom: 1px solid #222;
        cursor: pointer;
    }
    .nav li a:before {
        font: 14px fontawesome;
        position: absolute;
        top: 14px;
        left: 20px;
    }
    .nav li:nth-child(1) a:before {
        content: '\f015';
    }
    .nav li:nth-child(2) a:before {
        content: '\f0c2';
    }
    .nav li:nth-child(3) a:before {
        content: '\f183';
        left: 23px;
    }
    .nav li:nth-child(4) a:before {
        content: '\f003';
    }
    .nav li:nth-child(5) a:before {
        content: '\f013';
    }
    .nav li:nth-child(6) a:before {
        content: '\f023';
        left: 22px;
    }
    .nav li a:hover {
        background: #444;
    }
    .nav li a.active {
        box-shadow: inset 5px 0 0 #5b5, inset 6px 0 0 #222;
        background: #444;
    }

脚本阻止：

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
           setNavigation();
        });

        function setNavigation() {
            var path = window.location.pathname;
            path = path.replace(/\/$/, "");
            path = decodeURIComponent(path);

            $(".nav a").each(function () {
                var href = $(this).attr('href');

                if (path.substring(1, path.length) === href) {
                    $(".nav a").removeClass('active');
                    $(this).addClass('active');
                    return;
                }
            });
        }
    </script>

这应该可以正常工作。

Answer 2

我稍稍移动了你的代码并使jquery工作，不确定它在代码片段中的效果如何，所以这里有一个小提琴https://jsfiddle.net/link2twenty/wysh0j6q/

＆＃13;

 

$('document').ready(function() {
  setNavigation();
});

function setNavigation() {
  var path = window.location.href;
  path = (path.substring(path.lastIndexOf('/') + 1));

  $(".nav .menu").each(function() {
    var href = $(this).attr('href');
    if (path === href) {
      $(this).addClass('active');
    }
  })
}

＆＃13;

body {
  margin: 0;
}

li {
  list-style: none;
}

.nav li a {
  position: relative;
  display: block;
  padding: 15px 15px 15px 50px;
  font-size: 12px;
  color: #eee;
  background: #333;
  border-bottom: 1px solid #222;
  cursor: pointer;
}

.nav li a:before {
  font: 14px fontawesome;
  position: absolute;
  top: 14px;
  left: 20px;
}

.nav li:nth-child(1) a:before {
  content: '\f015';
}

.nav li:nth-child(2) a:before {
  content: '\f0c2';
}

.nav li:nth-child(3) a:before {
  content: '\f183';
  left: 23px;
}

.nav li:nth-child(4) a:before {
  content: '\f003';
}

.nav li:nth-child(5) a:before {
  content: '\f013';
}

.nav li:nth-child(6) a:before {
  content: '\f023';
  left: 22px;
}

.nav li a:hover {
  background: #444;
}

.nav li a.active {
  box-shadow: inset 5px 0 0 #5b5, inset 6px 0 0 #222;
  background: #444;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script type='text/javascript' src='//code.jquery.com/jquery-2.1.4.js'></script>
<div class='sidebar'>
  <div class='title'>
    Sonder
  </div>
  <div class='nav'>
    <li><a class='menu' href='#'>Home</a></li>
    <li><a class='menu' href='#'>Members</a></li>
    <li><a class='menu' href='#'>Friends</a></li>
    <li><a class='menu' href='#'>Messages</a></li>
    <li><a class='menu' href='js'>Edit Profile</a></li>
    <li><a class='menu' href='#'>Logout</a></li>
  </div>
</div>

＆＃13;

Answer 3

您的CSS规则按订单执行，您的active班级会覆盖悬停。

改变立场，它应该有效

.nav li a.active {
    box-shadow: inset 5px 0 0 #5b5, inset 6px 0 0 #222;
    background: #444;
}
.nav li a:hover {
    background: #444;
}

或添加特定的active:hover规则

Answer 4

将css规则更改为

.nav li.active a{}

为什么我不能突出我目前的链接？

4 个答案: