2 xiaozhuyirena xiaozhuyirena 于 2017.01.16 15:03 提问

li标签和a 标签怎么同时响应点击事件,但a标签嵌套在li标签里面,点击后只响应a标签事件?

如题
html代码:

 <div class="collapse navbar-collapse navbar-right" id="example-navbar-collapse">
            <ul class="nav navbar-nav " id="nav_home">
                <li class="active">
                    <a href="#myCarousel" title="首页">首页</a>
                </li>
                <li>
                    <a href="#about" title="关于">关于</a>
                </li>
                <li>
                    <a href="#product" title="产品">产品</a>
                </li>
                <li>
                    <a href="#support" title="技术支持">技术支持</a>
                </li>
                <li>
                    <a href="#case" title="案例">案例</a>
                </li>
                <li>
                    <a href="#contact" title="建议">联系</a>
                </li>
            </ul>
        </div>

js代码:

 $("a").click(function() {
        $("html,body").animate({
            scrollTop: $($(this).attr("href")).offset().top + "px"
        }, 1000);
        return false;
    });
    $("#nav_home").each(function (index) {
        $(this).click(function () {
            $("li").removeClass("active");
            $("li").eq(index).addClass("active");
        });
    });

我想改变li标签的颜色,但发现只响应a标签的跳转事件,不响应li标签的点击事件

10个回答

qq_35235940
qq_35235940   2017.01.16 15:11
已采纳

你可以直接写成li的点击事件,然后跳转到它的子类a的地址啊

xiaozhuyirena
xiaozhuyirena 解决了,楼下给的冒泡事件处理方式看了一下
11 个月之前 回复
qq_35235940
qq_35235940 那就要看看哪里报错了,是不是你的a标签点击事件有问题影响了
11 个月之前 回复
xiaozhuyirena
xiaozhuyirena 试了 还是不行 事件处理的有问题么
11 个月之前 回复
qq_35235940
qq_35235940 那就吧removeclass那里换成 $("#nav_home li").attr("class",'');
11 个月之前 回复
xiaozhuyirena
xiaozhuyirena active类有个背景变化的,a标签的平滑过渡没问题的可以实现。只是点击后那个li 标签active类无法去除
11 个月之前 回复
qq_35235940
qq_35235940 我临时测试都可以啊
11 个月之前 回复
xiaozhuyirena
xiaozhuyirena 我修改成你写的那个,还是不行,class还是无法添加,只能响应a标签事件呢
11 个月之前 回复
qq_35235940
qq_35235940 你遍历的是ul不是li
11 个月之前 回复
sun1021873926
sun1021873926   Ds   Rxr 2017.01.16 16:01

可以看哈这篇文章,具体说就是阻止冒泡事件。 http://www.cnblogs.com/jams742003/archive/2009/08/29/1556187.html

u012571917
u012571917   2017.01.16 16:49

$("a").click(function() {
$("html,body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
}, 1000);
return false;
$("#nav_home li").removeClass("active");
$(this).parent.addClass("active");
});
直接去掉li的click事件

u012976158
u012976158   2017.01.16 15:21

$("#nav_home")将这里 改成$("#nav_home li") 试一下 我忘了具体怎么写 你应该遍历该ul下面的li 不是遍历ul 你写的是操作当前的ul
需要用dom 获取所有的li 然后在进行操作

qq_35235940
qq_35235940   2017.01.16 15:23
     $("#nav_home li").each(function (index) {
        $(this).click(function () {
            $('li').removeClass("active");
            $(this).addClass("active");
        });
    });
xiaozhuyirena
xiaozhuyirena   2017.01.16 15:37

修改了$("#nav_home li") 还是不行,只能响应a的事件

qq_35235940
qq_35235940   2017.01.16 15:50
 <script>
 $("a").click(function() {
        $("html,body").animate({
            scrollTop: $($(this).attr("href")).offset().top + "px"
        }, 1000);
        return false;
    });
    $("#nav_home li").each(function (index) {
        $(this).click(function () {
            $('li').removeClass("active");
            $(this).addClass("active");
        });
    });
</script>
xiaozhuyirena
xiaozhuyirena   2017.01.16 17:02

还是不行@眼角带笑意

xiaozhuyirena
xiaozhuyirena   2017.01.16 17:35

$("a").click(function() {
$("#nav_home li").removeClass("active");
$(this).parent.addClass("active");
$("html,body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
}, 1000);
return false;

});

这个可以了

qq_37495405
qq_37495405   2017.12.05 09:56

li标签和a 标签怎么同时响应点击事件,但a标签嵌套在li标签里面,点击后只响应a标签事件?也是碰到了一样的问题无法解决,很多方法都试了,除非把a标签的跳转return false ,li标签的点击才有用

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!