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   Rxr 2017.01.16 15:11
已采纳

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

xiaozhuyirena
xiaozhuyirena 解决了,楼下给的冒泡事件处理方式看了一下
一年多之前 回复
qq_35235940
qq_35235940 那就要看看哪里报错了,是不是你的a标签点击事件有问题影响了
一年多之前 回复
xiaozhuyirena
xiaozhuyirena 试了 还是不行 事件处理的有问题么
一年多之前 回复
qq_35235940
qq_35235940 那就吧removeclass那里换成 $("#nav_home li").attr("class",'');
一年多之前 回复
xiaozhuyirena
xiaozhuyirena active类有个背景变化的,a标签的平滑过渡没问题的可以实现。只是点击后那个li 标签active类无法去除
一年多之前 回复
qq_35235940
qq_35235940 我临时测试都可以啊
一年多之前 回复
xiaozhuyirena
xiaozhuyirena 我修改成你写的那个,还是不行,class还是无法添加,只能响应a标签事件呢
一年多之前 回复
qq_35235940
qq_35235940 你遍历的是ul不是li
一年多之前 回复
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   Rxr 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   Rxr 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币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
js给li标签中的所有a标签加点击事件
javascript中 $('#sportsItem2 a').click( function() { var $this = $(this); $ids = $this.attr("id"); console.info($ids); $("#club-list").empty(); $this.addClass("on").parents().siblings() .chil
li里面嵌套a标签html和css小例子
总效果: html: 响应式CSS: /* 网站头部 */ header {     width: 100%; } header .top {     line-height: 3rem;     padding: 0 1.5rem;     color: #fff;     background: #555;     bor
jquery点击li触发a链接href事件
$("#left li").click(function() { $("a",this)[0].click(); }); 之前我用$("a",this).click();老是报错,后来查询需要加上[0],就可以了,不知道为啥,明明是取的当前的li,不知道我alert($("a",this))会弹出所有的li的a,请大神指点
<a>标签点击事件后的操作
其实,也不知道怎么去给文章命名,就简单的记录下我遇到的问题吧,不多说,上代码。 测试连接 点击以后是否出现问题 我想让这个点击在跳转前做点别的事情,so, $("#tab1").click(function(e){ $("#input").val("已经点击")
关于li标签中含有a标签下li:hover无效
关于li标签中含有a标签下li:hover无效
点击li标签中的a href内容,获取相应的li标签,删除/编辑该li的内容
(html)页面                                             {$r[id]}                                {$r[title]}                   {date("Y-m-d",$r[inputtime])}                                    
jquery实现单机li标签时,执行跳转,li标签下面的a标签路径
思路: 这是一个触发事件,li标签被单击时,触发click方法,方法会获取到a标签的路径,进行页面跳转。 沿着这个思路去完成。 1、引入jquery script src="http://code.jquery.com/jquery-latest.js">script> 2、实现 ul> li>点击这里也可以a href="http://bird.so">birda>li>
a标签触发另一个a标签点击事件
Test    function autorunA()  {  alert(8);   var dtx=document.getElementById('divTest'); // var as=dtx.getElementsByTagName('a'); dtx.click();  }   123321 123321
a标签里面嵌套一个a标签,点击子链接标签时,同时触发了父标签a
情景还原: html生成的源码: 电子资源 数据库 试用数据库 自建特色数据库 span点击触发事件: function redict(id, name) { //接下来使用js代码进行页面跳转 window.location.href = "
如何把 <li> 标签种的 <a> 设置成和<li>一样大,并且把<li>覆盖在下面。
如何把 标签种的 设置成和一样大,并且把覆盖在下面。 第一步:把设置成“display:inline;” 第二步:把设置成“display:block;” 下面是HTML文件 home About Photos Live Contact 下面是CSS文件 li{ float:left; display:inline; wi