您的位置:首页 > 其它

同级元素,鼠标经过高亮,鼠标离开还原(除选中已高亮元素时),点击确定高亮

2012-11-26 16:30 344 查看
<script type="text/javascript">
$(document).ready(function() {

//选择器名称
var ElementLL = "#bodyNavLi li";
//普通样式
var Normal = "n51_box2_jh_li";
//高亮样式
var MouseOver = "n51_box2_jh_li_hover";

//初始化(选中第一项)
$(ElementLL).eq(0).addClass(MouseOver);
$(ElementLL).eq(0).removeClass(Normal);

//鼠标经过和离开
$(ElementLL).hover(function() {
var j = 0;
var index = $(this).index();
$(ElementLL).each(function(i) {
if ($(ElementLL).eq(i).attr("class") == MouseOver) {
j = i;
}
else {
$(ElementLL).eq(index).addClass(MouseOver);
$(ElementLL).eq(index).removeClass(Normal);
}
});

}, function() {
var j = 0;
var index = $(this).index();
$(ElementLL).each(function(i) {
if ($(ElementLL).eq(i).attr("class") == MouseOver) {
j++;
}
});

if (j == 2) {
$(this).removeClass(MouseOver);
$(this).addClass(Normal);
}
});

//单击选中
$(ElementLL).click(function() {
$(ElementLL).removeClass(MouseOver);
$(ElementLL).addClass(Normal);

$(this).removeClass(Normal);
$(this).addClass(MouseOver);

});
});
</script>

<div id="bodyNavLi" class="n51_box2_jh">
<ul>
<li id="bodyheadLi1" class="n51_box2_jh_li" onclick="MouseOver('bodyheadtext',4,1);">八字算命</li>
<li id="bodyheadLi2" class="n51_box2_jh_li" onclick="MouseOver('bodyheadtext',4,2);">姓名测试</li>
<li id="bodyheadLi3" class="n51_box2_jh_li" onclick="MouseOver('bodyheadtext',4,3);">号码吉凶</li>
<li id="bodyheadLi4" class="n51_box2_jh_li" onclick="MouseOver('bodyheadtext',4,4);">星座配对</li>

</ul>

</div>

.net URL重写例子
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐