pcmonkey
访问次数：38600 次
联系站长：
联系站长：
原创：21 篇转载：21 篇相片：21 张评论：21 条
个人资料
pcmonkey
文章搜索
文章存档
JQuery实现对ul标签的相关操作
在网页前端开发中，经常遇到要让一个ul标签中的所有li元素实现鼠标移入或移出时改变样式的需求。以前的普遍做法是，为每一个li元素指定一个Onmouseover和Onmouseout事件，就像这样：
<ul> <li onmouseover="changestyle1(this);" onmouseout="changestyle2(this);">Home</li> <li onmouseover="changestyle1(this);" onmouseout="changestyle2(this);">News</li> ...... </ul>
当<li>元素数量比较多的时候，这种写法显得非常繁琐。幸运的是自从有了JQuery以后，一切都变得简单起来。我们把下面的语句放到<head>标签内，为某一个<ul>标签下面的所有<li>指定鼠标移入移出事件：
<script>
$(function(){
$("ul.mainnavi li").mouseover(function(){ //当class为mainnavi的ul标签下面每一个li元素遇到mouseover事件时
$(this).addClass("selected") //鼠标指向的这个<li>元素追加selected样式
})
$("ul.mainnavi li").mouseout(function(){ //同理，当mouseout也就是鼠标移走时
$(this).removeClass("selected") //鼠标指向的这个<li>元素移除selected样式
})
})
</script>简简单单几句代码就代替了以前繁琐的事件指定，是不是很棒呢？
还有的时候，我们希望在鼠标指向（或是点击）每一个标签时，另一块区域显示不同的内容，这时我们也可以使用JQuery强大的选择器功能，实现鼠标指向（或点击）某一个标签时，其它所有标签改变样式，同时指定区域显示相应的内容。
首先我们依然布局一个<ul>标签，然后在某一个区域布局N个<DIV>块（N等于li标签的数量），每一个<div>都有一个ID，名称依数字排列，例如在本例中我们把ID名称命名为content0、content1、content2……注意，编号是从0开始而不是从1开始。
然后我们在<head>标签中加入以下代码：
<script>
$(function(){
$("ul.sortnavi li").mouseover(function(){ //当class为mainnavi的ul标签下面每一个li元素遇到mouseover事件时（也可根据需要改成click事件）
var i=$(this).index() //将指向的这个<li>元素的编号（编号从0开始计）写入到变量i
$(this).siblings().removeClass("selected") //为除了这个li元素外的其它li元素移除selected样式
$(this).addClass("selected") //为这个li元素追加selected样式
$("div[id*='content']").addClass("divhidden") //为所有ID为content*的DIV追加divhidden样式（也就是隐藏DIV）
$("#content"+i).removeClass("divhidden") //为id是content*（*就是所指向li元素的序号）的DIV移除divhidden样式（也就是显示相对应的内容）
})
})
</script>就这样，同样是几行代码，取代了以前需要分别对每一个<li>标签和每一个<div>块进行样式改变、显示或隐藏的繁琐操作。