我想根据用户的点击动态更改列表项的类别。我有一个菜单,我想将 .active
类仅分配给用户单击的菜单,并且最初主菜单必须处于事件状态
这是我的代码
function activeclass(id)
{
document.getElementById(id).className += "active";
}
<section id="menu-area">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- LOGO -->
<!-- TEXT BASED LOGO <a class="navbar-brand" href="index.html">Inventive</a> -->
<!-- IMG BASED LOGO -->
<a class="navbar-brand" href="index.html"><img class="img-responsive" src="assets/images/logo.png" alt="logo" width="200"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
@yield('logo')
<li id="home"><a href="{{ URL::route('index') }}" onclick="activeclass(id)">Home</a></li>
<li id="aboutus"><a href="{{ URL::route('aboutus') }}" onclick="activeclass(id)">About Us</a></li>
<li id="products"><a href="{{ URL::route('products') }}" onclick="activeclass(id)">Products</a></li>
<li id="gallery"><a href="{{ URL::route('gallery') }}" onclick="activeclass(id)" >Gallery</a></li>
<li id="contactus"><a href="{{ URL::route('contactus') }}" onclick="activeclass(id)">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</section>
在 CSS 文件中,带有 li 的 active 类将用于突出显示所选页面菜单
最佳答案
尽管有更好的方法来实现您想要的东西(例如 @Jitendra Tiwari 的答案或我下面的示例),但我想向您指出代码中的问题。
问题在于您向函数 activeclass
传递了一个未知参数:id
。
当您调试代码时,您可以看到 id
参数为空:
您需要传递一个带有相关id
的字符串参数:
function activeclass(id) {
document.getElementById(id).className += "active";
}
.active {
background:red;
}
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- LOGO -->
<!-- TEXT BASED LOGO
<a class="navbar-brand" href="index.html">Inventive</a> -->
<!-- IMG BASED LOGO -->
<a class="navbar-brand" href="index.html"><img class="img-responsive" src="assets/images/logo.png" alt="logo" width="200"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
@yield('logo')
<li id="home"><a href="#" onclick="activeclass('home')">Home</a></li>
<li id="aboutus"><a href="#" onclick="activeclass('aboutus')">About Us</a></li>
<li id="products"><a href="#" onclick="activeclass('products')">Products</a></li>
<li id="gallery"><a href="#" onclick="activeclass('gallery')" >Gallery</a></li>
<li id="contactus"><a href="#" onclick="activeclass('contactus')">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
http://jsbin.com/dadoqop/edit?html,css,js
此外,请从代码中删除 public
关键字。它不是在 JavaScript 中
一个工作示例没有 jQuery:
[].forEach.call(document.querySelectorAll('#top-menu a'), function(elm) {
elm.addEventListener('click', function() {
var active = document.querySelector('.active');
if (active) {
active.classList.remove('active');
}
elm.parentNode.classList.add('active');
});
});
.active {
background:red;
}
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- FOR MOBILE VIEW COLLAPSED BUTTON -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- LOGO -->
<!-- TEXT BASED LOGO
<a class="navbar-brand" href="index.html">Inventive</a> -->
<!-- IMG BASED LOGO -->
<a class="navbar-brand" href="index.html"><img class="img-responsive" src="assets/images/logo.png" alt="logo" width="200"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
@yield('logo')
<li id="home"><a href="#">Home</a></li>
<li id="aboutus"><a href="#">About Us</a></li>
<li id="products"><a href="#">Products</a></li>
<li id="gallery"><a href="#">Gallery</a></li>
<li id="contactus"><a href="#">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
关于javascript - 如何使用JS函数动态更改列表的类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37247962/