我正在尝试使用css和JavaScript制作导航栏,我的代码工作得很好,只需点击链接,胡佛外观保持活跃状态。有没有其他方法来实现这一点,因为我认为我的JavaScript代码不是很有效
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="main.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
window.onload = function() {
function clicka(num) {
console.log(num);
if(num == 1){
document.getElementById(num).className = 'active';
document.getElementById('2').className = 'unactive';
document.getElementById('3').className = 'unactive';
document.getElementById('4').className = 'unactive';
}
else if(num == 2){
document.getElementById('1').className = 'unactive';
document.getElementById(num).className = 'active';
document.getElementById('3').className = 'unactive';
document.getElementById('4').className = 'unactive';
}
else if(num == 3){
document.getElementById('1').className = 'unactive';
document.getElementById('2').className = 'unactive';
document.getElementById(num).className = 'active';
document.getElementById('4').className = 'unactive';
}
else if(num == 4){
document.getElementById('1').className = 'unactive';
document.getElementById('2').className = 'unactive';
document.getElementById('3').className = 'unactive';
document.getElementById(num).className = 'active';
}
}
var a = document.getElementById('click');
var b = document.getElementById('click2');
var c = document.getElementById('click3');
var d = document.getElementById('click4');
a.onclick = function(){
clicka('1');
}
b.onclick = function(){
clicka('2');
}
c.onclick = function(){
clicka('3');
}
d.onclick = function(){
clicka('4');
}
}
</script>
</head>
<body class="body">
<header class="mainHeader">
<img src="rrr.jpg">
<nav><ul>
<li class="active" id="1"><a href="#" id="click">Home</a></li>
<li class="unactive" id="2"><a href="#" id="click2">About</a></li>
<li class="unactive" id="3"><a href="#" id="click3">Portfolio</a></li>
<li class="unactive" id="4"><a href="#" id="click4">Contact</a></li>
</ul></nav>
</header>
body{
background-color:#F0F0F0 ;
color:#000305;
font-size: 87.5%;
font-family: Arial,'Lucida Sans Unicode';
line-height: 1.5;
text-align: left;
}
a{
text-decoration: none;
}
a:link, a:visited{
}
a:hover, a:active{
}
.body{
margin:0 auto;
width:70%;
clear:both;
}
.mainHeader img{
width:30%;
height:auto;
margin: 2% 0;
}
.mainHeader nav{
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul{
list-style: none;
margin: 0 auto;
}
.mainHeader nav ul li{
float: left;
display: inline;
}
.mainHeader nav a:link, .mainHeader nav a:visited{
color:#fff;
display: inline-block;
padding: 10px 25px;
height: 20px;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited{
background-color: #cf5c3f;
text-shadow: none;
}
.mainHeader nav ul li a{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
答案 0 :(得分:1)
试试这个:
function clicka(num) {
var nav = document.getElementById('navbar'), c = nav.children, l = c.length, i;
for( i=0; i<l; i++) c[i].className = "unactive";
document.getElementById(num).className = "active";
}
// <ul id="navbar"><li...>...</li></ul>
更简单;)