列表隔行变色、显示和隐藏下拉菜单、列表的高亮显示效果
生活随笔
收集整理的這篇文章主要介紹了
列表隔行变色、显示和隐藏下拉菜单、列表的高亮显示效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
列表隔行變色
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><title>Title</title><script src="jquery-1.12.1.js"></script><script>$(function(){// 點擊按鈕$("#btn").click(function(){// 奇----紅色,偶----黃色// odd----奇數的// even----偶數$("ul>li:even").css("backgroundColor","red");$("ul>li:odd").css("backgroundColor","yellow");}); });</script> </head> <body> <input type="button" value="隔行變色" id="btn"> <ul><li>我是第1個li</li><li>我是第2個li</li><li>我是第3個li</li><li>我是第4個li</li><li>我是第5個li</li><li>我是第6個li</li><li>我是第7個li</li><li>我是第8個li</li><li>我是第9個li</li><li>我是第10個li</li> </ul><script>// $(function () {// //就這么寫，會不會報錯，會不會有效果// var lis = $("li");// for (var i = 0; i < lis.length; i++) {// if (i % 2 == 0) {// // lis:jq對象// // lis[i]:DOM對象，通過下標取出來了// lis[i].style.backgroundColor = "pink";// } else {// lis[i].style.backgroundColor = "hotpink";// }// }// }); </script> </body> </html>顯示和隱藏下拉菜單
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">* {margin: 0;padding: 0;}ul {list-style: none;}.wrap {width: 330px;height: 30px;margin: 100px auto 0;padding-left: 10px;background-image: url(imgs/bg.jpg);}.wrap li {background-image: url(imgs/libg.jpg);}.wrap > ul > li {float: left;margin-right: 10px;position: relative;}.wrap a {display: block;height: 30px;width: 100px;text-decoration: none;color: #000;line-height: 30px;text-align: center;}.wrap li ul {position: absolute;top: 30px;display: none;}</style><script src="jquery-1.12.1.js"></script><script>// 頁面加載事件$(function(){// 獲取ul中所有的li,然后注冊鼠標進入和鼠標離開事件$(".wrap>ul>li").mouseenter(function(){// 當前li中的所有的子元素,再從所有的子元素中找ul$(this).children('ul').stop().show(500);});// 鼠標離開$(".wrap>ul>li").mouseleave(function(){$(this).children('ul').stop().hide(500);});});</script></head> <body> <div class="wrap"><ul><li><a href="javascript:void(0);">一級菜單1</a><ul class="ul"><li><a href="javascript:void(0);">二級菜單11</a></li><li><a href="javascript:void(0);">二級菜單12</a></li><li><a href="javascript:void(0);">二級菜單13</a></li></ul></li><li><a href="javascript:void(0);">一級菜單2</a><ul><li><a href="javascript:void(0);">二級菜單21</a></li><li><a href="javascript:void(0);">二級菜單22</a></li><li><a href="javascript:void(0);">二級菜單23</a></li></ul></li><li><a href="javascript:void(0);">一級菜單3</a><ul><li><a href="javascript:void(0);">二級菜單31</a></li><li><a href="javascript:void(0);">二級菜單32</a></li><li><a href="javascript:void(0);">二級菜單33</a></li></ul></li></ul> </div></body> </html>列表的高亮顯示效果
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>ul {list-style-type: none;cursor: pointer;}</style><script src="jquery-1.12.1.js"></script><script>// 高亮顯示的效果:鼠標進入,當前的li有背景顏色,離開顏色就干掉了// 獲取ul中所有的li標簽,添加鼠標進入和鼠標離開事件// 頁面加載// $(function(){// // 鼠標進入// $("#uu>li").mouseenter(function(){// $(this).css("backgroundColor","red");// });// // 鼠標離開// $("#uu>li").mouseleave(function(){// $(this).css("backgroundColor","");// });// });// $(function(){// // 鼠標進入// $("#uu>li").mouseenter(function(){// $(this).css("backgroundColor","red");// }).mouseleave(function(){// $(this).css("backgroundColor","");// });// });// $(function(){// // 鼠標進入// $("#uu>li").mouseenter(function(){// $(this).css("backgroundColor","red");// });// // 鼠標離開事件// $("#uu>li").mouseleave(function(){// $(this).css("backgroundColor","");// });// // 點擊事件:當前的li中的字體樣式改變// $("#uu>li").click(function(){// $(this).css("color","green");// $(this).css("fontSize","29px");// $(this).css("fontFamily","Century Gothic");// });// });// 鏈式編程$(function(){// 鼠標進入$("#uu>li").mouseenter(function(){$(this).css("backgroundColor","red");}).mouseleave(function(){$(this).css("backgroundColor","");}).click(function(){$(this).css("color","green").css("fontSize","29px").css("fontFamily","Century Gothic");});});</script> </head> <body><ul id="uu"><li>倩女幽魂</li><li>海闊天空</li><li>千紙鶴</li><li>真的愛你</li><li>丑八怪</li><li>突然的自我</li><li>左手右手</li><li>喜洋洋</li><li>一路順風</li> </ul></body> </html>?
總結
以上是生活随笔為你收集整理的列表隔行变色、显示和隐藏下拉菜单、列表的高亮显示效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 设置某个元素的标签内容、设置元素的样式、
- 下一篇： 验证用户输入的是不是中文名字 淘宝精品案