<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态控制li球队列表</title>
<script type="text/javascript">
function iniEvent() {
 var ul = document.getElementById("football");
 var lis = ul.getElementsByTagName("li");
 for (var i = 0; i < lis.length; i++) {
  //鼠标经过事件
  lis[i].onmouseover = function () {
   var ul = document.getElementById("football");
   var lis = ul.getElementsByTagName("li");
   for (var i = 0; i < lis.length; i++) {
    var li = lis[i];
    if (li == this) {
     li.style.background = "red";
    }
    else {
     li.style.background = "gray";
    }
   }
  }
  //鼠标单击事件
  lis[i].onclick = function () {
   var ul = document.getElementById("football");
   var lis = ul.getElementsByTagName("li");
   for (var i = 0; i < lis.length; i++) {
    var li = lis[i];
    if (li == this) {
     li.style.fontSize = 30;
    }
    else {
     li.style.fontSize = 16;
    }
   }
  }
 }
}
</script>
</head>
<body onload="iniEvent()">
<!--功能说明
1.鼠标滑过的行变为红色
2.点击行字体变大
-->
<ul style="width:200px" id="football">
<li>皇马</li>
<li>曼联</li>
<li>切尔西</li>
<li>巴萨</li>
<li>Ac米兰</li>
<li>国际米兰</li>
</ul>
</body>
</html>

function del(n) {
$$(‘ul’).removeChild($$(n));
}

  • css动态效果是通过设置ul li ul{display:none}
    通过ul li:hover ul{display:block}。
  • javascript动态效果通过getElementById()找到元素,然后设置它的display属性。
  • jquery通过children()找到子元素,show()方法显示HTML元素,hide()方法隐藏HTML元素。
    对于二级菜单中的定位,一级菜单中使用ul li{position:relative;}
    ul li ul{position:absolute;top:40px; left: 0px;}

本文实例讲述了javascript操作ul中li的方法。分享给大家供大家参考。具体如下:

}
</script>

前两天接到的任务是优化一个页面,现在的理解是做一个三级的菜单形式。目前自己的想法还是使用ul
li先写出静态页面,然后通过(css、javascript、jquery)三种方法中的一个实现动态的展示效果。

您可能感兴趣的文章:

  • Jquery和JS获取ul中li标签的实现方法
  • angular或者js怎么确定选中ul中的哪几个li

<ul id=”ul”>

希望本文所述对大家的javascript程序设计有所帮助。

function getulvalue(){
if($$(‘ul’).childNodes.length==0){
alert(“请选择相关内容!”);
return;
}else{
var txt=””;
for(var i=0;i<$$(‘ul’).childNodes.length;i++){
txt+=$$(‘ul’).childNodes[i].id+”,”;
}
$$(“ul_value”).value=txt;
}

if(flag){
add(car_id,txt);
}
}

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注