[英]href is not working in my nav menu bar list
我似乎可以在侧面导航栏中获得 href 链接。我觉得这可能与我的 css 有关系。 过去 1 小时我一直在尝试解决这个问题,但我找不到问题出在哪里。
<nav id="nav" style="display: block;
z-index: 0;
-webkit-transition: none;
transition: none;
transition-property: none;
transition-duration: initial;
transition-timing-function: initial;
transition-delay: initial" class="active">
<div id="arrow"></div>
<ul id="nav-menu-items">
<li class="menu-item dark" id="DMIT" onmouseover="changetext();"onMouseOut="Defaulttext();"><a href="dmit.html">Diploma in MIT</a></li>
<li class="menu-item" id="ECC" onmouseover="changetext1();" onMouseOut="Defaulttext1();"><a href="ECC.html">Diploma in ECC </a></li>
<li class="menu-item dark" id="AAT" onmouseover="changetext2();" onMouseOut="Defaulttext2();" ><a href="AAT.html">Diploma in AAT</a></li>
<li class="menu-item" id="ME" onmouseover="changetext3();" onMouseOut="Defaulttext3();" ><a href="Me.html">Diploma in ME</a> </li>
<li class="menu-item dark" id="TMT" onmouseover="changetext4();" onMouseOut="Defaulttext4();" ><a href="TMT.html">Diploma in TMT</a> </li>
<li class="menu-item pink" id="nav-choose"><img src="images/global/tri.png"> <br>
Choose A Course</li>
</ul>
</ul>
</nav>
这是我的 css 代码
#nav{
position: absolute;
top: 254px;
left: 320px;
cursor: pointer;
width: 118px;
z-index: 2;
-webkit-transition: all ease-out 0.6s;
-moz-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
#nav-menu-items {
position: relative;
}
#nav-menu-items .menu-item a {
display: block;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 10px;
font-weight: 200;
padding: 8px 0px 9px 0px;
}
#nav .menu-item a:hover{
color: #333;
text-decoration: none;
background-image: url(images/global/whitebox.jpg);
}
#nav .menu-item:hover{
background-image: url(images/global/whitebox.jpg);
}
javascript代码
function changetext()
{
var id=document.getElementById("DMIT");
id.style.color="black";
id.style.textAlign="center";
id.innerHTML="Diploma in Multimedia & infocomm Technology ";
}
function Defaulttext()
{
var id=document.getElementById("DMIT");
id.style.color="white";
id.style.textAlign="center";
id.innerHTML="Diploma in MIT ";
}
//ecc hover
function changetext1()
{
var id1=document.getElementById("ECC");
id1.style.color="black";
id1.style.textAlign="center";
id1.innerHTML="Diploma in Electronics, Computer & Communications ";
}
function Defaulttext1()
{
var id1=document.getElementById("ECC");
id1.style.color="white";
id1.style.textAlign="center";
id1.innerHTML="Diploma in ECC ";
}
//AAT hover
function changetext2()
{
var id=document.getElementById("AAT");
id.style.color="black";
id.style.textAlign="center";
id.innerHTML="Diploma in Aeronautical & Aerospace Technology";
}
function Defaulttext2()
{
var id=document.getElementById("AAT");
id.style.color="white";
id.style.textAlign="center";
id.innerHTML="Diploma in AAT ";
}
function changetext3()
{
var id=document.getElementById("ME");
id.style.color="black";
id.style.textAlign="center";
id.innerHTML="Diploma in Mechatronics Engineering ";
}
function Defaulttext3()
{
var id=document.getElementById("ME");
id.style.color="white";
id.style.textAlign="center";
id.innerHTML="Diploma in ME ";
}
function changetext4()
{
var id=document.getElementById("TMT");
id.style.color="black";
id.style.textAlign="center";
id.innerHTML="Diploma in Telematics & Media Technology ";
}
function Defaulttext4()
{
var id=document.getElementById("TMT");
id.style.color="white";
id.style.textAlign="center";
id.innerHTML="Diploma in TMT ";
}
问题是你的鼠标悬停函数改变了 li 元素的 innerHTML 并用简单的文本替换了其中的 a 元素
例子:
您需要首先获取 a 元素(当前元素的所有子元素都在children
对象中可用;当心 IE <=8,它将在children
包含注释节点)
所以,在changetext()
函数中,你应该添加
var _link = id.children[0];
而不是
id.innerHTML="Diploma in Multimedia & infocomm Technology ";
你应该有
_link.innerHTML="Diploma in Multimedia & infocomm Technology ";
您需要对Defaulttext()
函数(以及其余函数)进行类似的更改
添加这个....
id.firstElementChild.innerHTML = "Diploma in TMT ";
当您重写innerHTML时,您正在删除A标签
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.