点击< li>时有效 [英] Active when click the <li>
本文介绍了点击< li>时有效的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
1，我创建了一个导航栏
2，我想在点击它时激活列表
3，我不知道为什么不工作
请帮助和谢谢
我尝试过：
1,i have create a navbar
2,i want to active the list when i click on it
3,i dont know why not working
PLEASE HELP AND THANK
What I have tried:
<style>
.li:hover {
background-color: #dcdfe5;
cursor: pointer;
}
.active, .li:hover {
background-color: #dcdfe5;
color: white;
}
</style>
<div class="collapse navbar-collapse" id="myDIV">
<ul class="nav navbar-nav navbar-left">
<li class="List"><a href="{{ route('dashboard.index') }}">Dashboard</a></li> <li class="List"><a href="{{ route('bicycle.index') }}">Bike</a></li> <li class="List"><a href="{{ route('sales.index') }}">Sales</a></li> </ul>
</div>
<script>
var header = document.getElementById("myDIV");
var list = header.getElementsByClassName("List");
for (var i = 0; i < list.length; i++) {
list[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}
</script>
推荐答案
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.li:hover {
background-color: #dcdfe5;
cursor: pointer;
}
.active, .li:hover {
background-color: #dcdfe5;
color: white;
}
</style>
</head>
<body>
<div class="collapse navbar-collapse" id="myDIV">
<ul class="nav navbar-nav navbar-left">
<li class="List active">
<a>Dashboard</a>
</li>
<li class="List">
<a>Bike</a>
</li>
<li class="List">
<a>Sales</a>
</li>
</ul>
</div>
<script>
var header = document.getElementById("myDIV");
var list = header.getElementsByClassName("List");
for (var i = 0; i < list.length; i++) {
list[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
if (current.length > 0) {
current[0].className = current[0].className.replace(" active", "");
}
this.className += " active";
});
}
</script>
</body>
</html>
此代码可以运行它并重播我...
This Code Can you run it and Replay me...
这篇关于点击< li>时有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
