最后一个li的效果不需要实现

zulowd 2014-04-21 05:35:32



<!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>无标题文档</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<script type="text/javascript">

  $(function(){

    var menu_li=$(".div_head li")

    menu_li.click(function() {

     $(this).addClass('active_h').siblings().removeClass('active_h');

     var menu_index=menu_li.index(this);

     $(".div1 > div").eq(menu_index).show().siblings().hide();

    });

  })

	$(function(){

		var li=$(".div_menu li:not(:last)");

		li.mouseover(function() {

			$(this).addClass('active').siblings().removeClass('active');

			

		});

		li.mouseout(function() {

			$(this).removeClass('active');

		});

	})

</script>

<style type="text/css">

 li{

 	list-style: none;

 }

 .div_head{



 }

 .div{

  width: 450px;

  margin: 100px auto;

  border: 1px solid #DCDCDC;

 }

 .div_head{

 	float: left;

 }

 .div_head li{

 	width: 50px;

 	height: 30px;

 	float: left;

 }

 .div_head li.active_h{

 	background: #00BCF3;

 	color: #FFF;

 }

 .div_menu{

 	float: left;

 	display: none;

 }

 .div_menu li{

 	width: 100px;

 	height: 100px;

 	display: inline-block;

 	border: 1px solid #313131;

 }

 .div_menu li.active{

 	border: 1px solid #00BCF3;

 }

</style>

</head>

<body>

	<div class="div">

		<div class="div_head">

		<ul>

			<li class="active_h">111</li>

			<li>222</li>

			<li>333</li>

		</ul>

	</div>

<div class="div1">

	<div class="div_menu" style="display: block;">

		<ul>

			<li></li>

			<li></li>

			<li></li>

			<li></li>

			<li></li>

		</ul>

	</div>

	<div class="div_menu">

		<ul>

			<li></li>

			<li></li>

			<li></li>

			<li></li>

			<li></li>

		</ul>

	</div>

</div>

	</div>

</body>

</html>

请问下我想这里每个div_menu li:last都不需要效果要怎么做啊

...全文

108 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

阿鱼 2014-04-22

打赏
举报

楼主代码：


var li=$(".div_menu li:not(:last)");

问题在于-->这样取到的并不是每个div_menu下最后一个li,而是两个div_menu中所有li的集合的最后一个（也就是第二个div_menu下的最后一个li。 3楼的代码：


$(function(){
    //var li = $(".div_menu:visible li:not(:last)");
    var menu_li=$(".div_head li")
    menu_li.click(function() { //-(1)--单击div_head中的li
       $(this).addClass('active_h').siblings().removeClass('active_h');
       var menu_index=menu_li.index(this);
       $(".div1 > div").eq(menu_index).show().siblings().hide();
       var li = $(".div_menu:visible li:not(:last)");
       li.mouseover(function() {//--(2)--给div_menu中的li绑定mouseover事件
        $(this).addClass('active').siblings().removeClass('active');
         
    });

问题在于div_menu里li的hover事件只有在单击div_head中的li后才会绑定，也就是说页面初始化的时候 div_menu的所有li都没有绑定mouseover事件所以就不会有效果。解决方法：楼主在自己原来代码上稍修改下即可原代码：


.....
		var li=$(".div_menu li:not(:last)");
		li.mouseover(function() {
			$(this).addClass('active').siblings().removeClass('active');
			
		});
.....

修改为：


......
		var li=$(".div_menu li");//修改选择器
		li.mouseover(function() {
			if(!$(this).next().length){return false}//新增一句判断
			$(this).addClass('active').siblings().removeClass('active');
			
		});
.....

zulowd 2014-04-22

打赏
举报

引用 3 楼 microlab2009 的回复:

$(function(){
    //var li = $(".div_menu:visible li:not(:last)");
    var menu_li=$(".div_head li")
    menu_li.click(function() {
       $(this).addClass('active_h').siblings().removeClass('active_h');
       var menu_index=menu_li.index(this);
       $(".div1 > div").eq(menu_index).show().siblings().hide();
       var li = $(".div_menu:visible li:not(:last)");
       li.mouseover(function() {
        $(this).addClass('active').siblings().removeClass('active');
        
    });
       li.mouseout(function() {
        $(this).removeClass('active');
    });
   });
    
    
    
})

这个效果第一次没有效果的只有点击了选项卡后才有效果我把这一段放到外面来 var li = $(".div_menu:visible li:not(:last)"); li.mouseover(function() { $(this).addClass('active').siblings().removeClass('active'); }); li.mouseout(function() { $(this).removeClass('active'); }); 只有第一个有效果切换以后其他的div没有效果这是怎么回事啊

嘻哈大咖秀 2014-04-21

打赏
举报

$(function(){
    //var li = $(".div_menu:visible li:not(:last)");
    var menu_li=$(".div_head li")
    menu_li.click(function() {
       $(this).addClass('active_h').siblings().removeClass('active_h');
       var menu_index=menu_li.index(this);
       $(".div1 > div").eq(menu_index).show().siblings().hide();
       var li = $(".div_menu:visible li:not(:last)");
       li.mouseover(function() {
        $(this).addClass('active').siblings().removeClass('active');
        
    });
       li.mouseout(function() {
        $(this).removeClass('active');
    });
   });
    
    
    
})

zulowd 2014-04-21