Question

我有一个导航栏，如果单击其中一个菜单按钮，它不会更改当前按钮的颜色。在Laravel中，它的工作非常完美，如果我在没有任何框架的情况下执行此操作，我不知道为什么它不起作用。有人可以帮帮我吗？ navbar：

 <div class="collapse navbar-collapse activebtn" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav ">
                <li><a href="index.php" >Comments<span class="sr-only">(current)</span></a></li>
                <li><a href="profilepage.php">Profile</a></li> 
                <li><a href="allusers.php">Users</a></li> 
            </ul>
 </div>

的javascript：

 var loc = window.location.pathname;

$('.activebtn').find('a').each(function() {
$(this).toggleClass('active', $(this).attr('href') == loc);
});

CSS：

.navbar-default .activebtn a.active {
 padding: 0 21px;
 line-height: 33px;
 color: #56c93d;
 background: #323637;
 border-left: 0;
 border-right: 0;
 border-bottom: 3px solid #56c93d;
 background-image: -webkit-linear-gradient(top, #484e4f, #323637);
 background-image: -moz-linear-gradient(top, #484e4f, #323637);
 background-image: -o-linear-gradient(top, #484e4f, #323637);
 background-image: linear-gradient(to bottom, #484e4f, #323637);
 -webkit-box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);
 box-shadow: inset 0 -1px #151717, inset 0 -1px 8px rgba(0, 0, 0, 0.2);
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
 border-bottom-color: #56c93d;
}

Answer 1

您的代码几乎按写入方式工作 - 假设在此脚本运行时DOM已准备就绪 - 但window.location.pathname带有一个前导“/”，但不包括在内在您的锚点hrefs中，所以字符串永远不会匹配。要纠正这一点，您需要做的就是在锚点中包含前导“/”，否则清理路径名变量以匹配href属性中的内容：

// var loc = window.location.pathname;
// Setting a fake location for demo:
var loc = "/profilepage.php";

$('.exampleone').find('a').each(function() {
  $(this).toggleClass('active', $(this).attr('href') === loc);
});

a {color: #000}
.active {color: #F00}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="exampleone">
  <!-- changed the hrefs here -->
  <ul>
    <li><a href="/index.php">Comments<span class="sr-only">(current)</span></a></li>
    <li><a href="/profilepage.php">Profile</a></li>
    <li><a href="/allusers.php">Users</a></li>
  </ul>
</div>

Answer 2

您发布的javascript中没有任何内容涉及click()功能。您只是浏览所有a元素并将切换功能绑定到它们，而这些功能并没有做任何事情。尝试将each替换为click，如下所示：

var loc = window.location.pathname;

$('.activebtn').find('a').click(function() {
    $(this).toggleClass('active');
    $(this).attr('href', loc);
});

如果这没有帮助，请创建一个小提琴或代码笔，以便我们查看您的代码。

我的小提琴here

活动按钮在JQuery中不起作用

2 个答案: