Question

我似乎可以获得侧导航栏中的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 ";

}

Answer 1

问题是你的鼠标悬停功能改变了li元素的innerHTML并用简单的文本替换了它们里面的元素

示例：

您需要先获取a元素（当前元素的所有子元素都在children对象中可用;注意IE＆lt; = 8，它将包含{{1}内的注释节点}}）

所以，在children函数中你应该添加

changetext()

而不是

var _link = id.children[0];

你应该

id.innerHTML="Diploma in Multimedia & infocomm Technology ";

您需要对_link.innerHTML="Diploma in Multimedia & infocomm Technology ";函数（以及其他函数）进行类似的更改

Answer 2

添加此....

id.firstElementChild.innerHTML = "Diploma in TMT ";

当您重写innerHTML

时，您正在删除A标记

href在我的导航菜单栏列表中不起作用

2 个答案: