gpt4 book ai didi

javascript - 如何在 CSS 或 javascript 中激活超链接导航栏?

转载 作者:太空宇宙 更新时间:2023-11-04 13:27:15 25 4
gpt4 key购买 nike

我正在尝试使用 css 和 JavaScript 制作一个导航栏,我的代码工作正常,它所做的只是在单击链接时 hoover 外观保持事件状态。有没有其他方法可以做到这一点,因为我认为我的 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;
}

最佳答案

试试这个:

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>

简单多了;)

关于javascript - 如何在 CSS 或 javascript 中激活超链接导航栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23619908/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com