我知道关于这个主题还有其他主题，但没有一个对新手友好；) 我需要为学校制作一个网站，我希望在点击它后突出显示一个 li。
这是我得到的:
<!DOCTYPE html>
<html>
<title> De Vakman Wiersema </title>
<head>
<script type="text/javascript">
<!--
//-->
</script>
<style>
body {
background-color: #F2EEE6;
}
a {
text-decoration:none;
color: #FFFFFF;
}
div.head {
width: 1100px;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
border: 1px solid black;
background-color: #F2EEE0;
}
div.underhead {
width: 110px;
height: 500px;
border: 1px solid black;
background-color: #F2EEE0;
}
div.background {
background-color: #7F7A76;
position: absolute;
width: 100%;
height: 50%;
top: 0px;
right: 0px;
left: 0px;
}
#img1 {
margin-left: 292px;
margin-top: 10px;
border: 1px solid black;
}
#cssmenu {
width: 1000px;
font-family: Helvetica;
color: #FFFFFF;
position: absolute;
}
#cssmenu ul {
list-style-type:none;
padding:10px;
overflow:hidden;
background-color:#98BF21;
margin-left: 292px;
border-radius: 4px 100px 4px 4px;
}
#cssmenu a,
#cssmenu a:link,{
display:block;
width:200px;
height: 50px;
border: 1px solid black;
background-color:#98BF21;
}
#cssmenu li {
float:left;
margin-left: 50px;
border-radius: 5px;
padding: 0px;
display: inline-block;
}
#cssmenu li a {
background: #98BF21;
display: block;
padding: 10px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
#cssmenu li a:hover {
background: #11A304;
}
div.page {
width: 990px;
height: 800px;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
background: #F7F5F5;
border-radius: 5px;
box-shadow: 0px 0px 20px 3px #7F7979;
padding: 5px;
margin-top: 80px;
}
</style>
</head>
<body>
<div class="background">
<div class="logo">
<a href="http://goo.gl/maps/jScbt" target="_blank">
<img id="img1" src="images/logo.jpg" alt="Logo" height="150" width="220">
</a>
</div>
<div id='cssmenu'>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#producten">Producten</a></li>
<li><a href="#klussendienst">Klussendienst</a></li>
</ul>
</div>
<div class="page">
Text
</div>
</div>
</body>
</html>
(很抱歉没有使用任何“jsfiddle”或任何其他程序:-(
(P.S. 网站上的条款是荷兰语)
最佳答案
没有 jQuery:
document.getElementById('cssmenu').onclick = function(e) {
e = e || window.event;
var t = e.srcElement || e.target;
while(t != this && t.nodeName != "LI") t = t.parentNode;
if( t.nodeName == "LI") {
t.style.backgroundColor = "#11A304";
}
};
关于javascript - 如何让 li 在 JavaScript 中突出显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20317812/