如何在JavaScript中突出显示li
How do I keep a li highlighted in JavaScript?
我知道这个主题还有其他主题,但没有一个对noob友好;)我需要为学校做一个网站,我想在点击后突出显示一个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";
}
};
您可以使用Jquery。这是一个简单、快速、强大的库,允许您用少量代码做大事(它是一个javascript库)。如果你把这个粘贴到你的页面上,你可以得到你想要的:
<script type="text/javascript">
$('li').click(function(){
$(this).css( 'background-color', 'yellow' );
});
</script>
解释使用$('identifier'),您可以将事件绑定到页面的特定元素。。。它可以是html标记、id或类。在这种情况下,我们将单击绑定到li元素。
单击发生后,函数(){}内部的代码将被执行。对于变量this,我们引用刚刚单击的元素。使用.css方法(Jquery库的一种方法),我们可以更改所需的属性。
它可以被翻译为:"每次单击li元素,都要执行以下操作:获取刚刚单击的元素并更改其css:将其背景色更改为黄色"。
如果你不介意使用jQuery,你可以在点击时添加一个类,并在css中让该类提供突出显示的背景:
jQuery:
$('#cssmenu li a').click(function () {
$(this).addClass('highlighted');
});
CSS:
#cssmenu li a.highlighted {
background: #11A304;
}
JSFIDDLE:http://jsfiddle.net/ZyK93/
单击LI元素时,向该LI元素添加一个类,并从可能具有该类的任何其他LI元素中删除同一类:
$('#cssmenu li').on('click', function() {
$(this).addClass('active').siblings().removeClass('active');
});
FIDDLE
没有jQuery 也是如此
var li = document.getElementById('cssmenu').getElementsByTagName('li');
for (var i=li.length; i--;) {
if (document.attachEvent) {
li[i].attachEvent('onclick', handler);
}else if (document.addEventListener) {
li[i].addEventListener('click', handler, false);
}else{
li[i].onclick = handler;
}
}
function handler() {
for (var i=li.length; i--;) {
li[i].className = li[i].className.replace( /(?:^|'s)active(?!'S)/ , '' )
}
this.className = this.className + ' active';
}
FIDDLE
相关文章:
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 在bootstrap中显示隐藏特定的li
- 隐藏/显示包含单词的ul li项目.但只能入住李的子女
- 如何使用jquery显示具体的li数
- 使用jquery显示特定的li标记
- 自动完成搜索无法正常工作,请不要迭代$中的所有元素.每个ul-li都会及时显示响应
- 仅当我在 1 秒后将鼠标悬停在 li 上时,才会在悬停时显示弹出窗口
- 显示/隐藏具有不同类的li元素
- 当单击不同的li时,jQuery显示一个li
- 如何在JavaScript中突出显示li
- 显示与img最接近的li的JQuery Filter
- 隐藏/显示li's列表以及if语句和document.write
- ul li $(this).text() 什么也没显示
- 灯箱“下一个”功能仍然显示已隐藏的元素 (li) 显示:无;
- 使用鼠标悬停显示图像,图像位于 li-tag 之外
- 使用文本输入筛选 LI - 嵌套 LI 不显示
- 我有一个数据列表,我将其转换为 Ul 和 li 的列表,现在我希望这个列表在 JSP 中显示为树
- 如何通过jquery可选显示LI的值->选择事件
- 根据所选择的类别隐藏或显示LI(过滤器)
- 根据单击的类别过滤器隐藏/显示li项