Question

JQUery 一段代码 看不懂 帮忙打个注释

<!--------------- 导航 --------------->
<div class="right" id="cplb">
<UL data-url="{$GetTopClassUrl}">
<li class="current"><a href="index.html">网站首页</a></li>
<li><a href="关于我们.html">关于我们</a></li>
<li><a href="">课程介绍</a></li>
<li><a href="">师资团队</a></li>
<li><a href="">联系我们</a></li>
</UL>
</div>
<script type="text/javascript">
$(function(){
var durl = $("#cplb ul").attr("data-url");
$("#cplb ul li").each(function(){
var url = $(this).find("a").attr("href");
if(url==durl){
$("#cplb ul li").removeClass("current");
$(this).addClass("current");
}
});
});
</script>
<!--------------- 导航end --------------->

Answer 1

var durl = $("#cplb ul").attr("data-url");获取div下面的ul元素中的data-url并赋值给drul；

$("#cplb ul li").each(function(){
var url = $(this).find("a").attr("href");
if(url==durl){
$("#cplb ul li").removeClass("current");
$(this).addClass("current");
}
});
然后是遍历出当前有多少个li元素；

创建 变量（url）= 当前li元素找到下面的a标签并改变它的href值；
判断：
如果当前a元素的href值=ul的地址；
那么鼠标移动上去吧所有的Li元素中包含current类名的名字删掉；
并给当前的li元素添加current类名；

这个方法也就是经常用在导航模块中，current的属性可以在css中设置，可以移动上去为背景图片，颜色都可以，添加其他css3效果也行

Answer 2

var durl = $("#cplb ul").attr("data-url");获取div下面的ul元素中的data-url并赋值给drul；

$("#cplb ul li").each(function(){
var url = $(this).find("a").attr("href");
if(url==durl){
$("#cplb ul li").removeClass("current");
$(this).addClass("current");
}
});
然后是遍历出当前有多少个li元素；

创建 变量（url）= 当前li元素找到下面的a标签并改变它的href值；
判断：
如果当前a元素的href值=ul的地址；
那么鼠标移动上去吧所有的Li元素中包含current类名的名字删掉；
并给当前的li元素添加current类名；

这个方法也就是经常用在导航模块中，current的属性可以在css中设置，可以移动上去为背景图片，颜色都可以，添加其他css3效果也行