jq如何实现当前元素被点击隐藏同层级其他元素

Question

<span id="jianjie addClass">简介</span><span id="lishi">历史</span><span id="rongyu">荣誉</span><script type="text/javascript">$(function(){    $("#lishi").click(function(){        $(".lishi").addClass("animate");        $(".jianjie").removeClass("animate");    });    $("#rongyu").click(function(){        $(".rongyu").addClass("animate");        $(".lishi").removeClass("animate");    });})   </script>这么写太繁琐了

Answer 1

siblings()

Answer 2

1. jQ的事件回调里，$(this)就是event.target，即触发事件的DOM对象

2. 看下这里边的“遍历”分类，挨个儿都看一遍，你大概就该知道用什么了。

Answer 3

<script type="text/javascript">

$(function(){

    $("#lishi").click(function(){

        $(this).addClass("animate").siblings().removeClass("animate");

    });

    $("#rongyu").click(function(){

        $(this).addClass("animate").siblings().removeClass("animate");

    });

})   

</script>

Answer 4

建议可以把节点存储到一个变量中再使用，重复查找节点效率不高。简单来说，原理就是 this当前的隐藏，然后遍历兄弟节点实现效果。

Answer 5

百度一下“事件委托”就知道了