jQuery实现tab功能 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
</head>
<body>
    <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.js"></script>
    <div class="maintab">
        <ul class="tabtitle">
            <li class="tabhover">
                <a href="#">选择标题1</a>
            </li>
            <li class="taba">
                <a href="#">选择标题2</a>
            </li>
            <li class="taba">
                <a href="#">选择标题3</a>
            </li>
        </ul>
        <div class="tabcontent">选择内容1</div>
        <div class="tabcontent" style="DISPLAY: none">选择内容2</div>
        <div class="tabcontent" style="DISPLAY: none">选择内容3</div>
    </div>

    <script type=text/javascript>
        $(document).ready(
            function(){
                $(".tabtitle li").click(   //捕捉点击事件
                    function(){
                        var index=$(this).index();  
                          $(this).attr("class","tabhover").siblings("li").attr("class","taba");  //siblings的可以获取元素的同胞元素（不包括元素自己）
                        $(".tabcontent").eq(index).show().siblings(".tabcontent").hide();  //index获得事件元素，自身show，同胞元素hide
                    }
                    );
            }
            )


    </script>

</body>
</html>

主要练习了jQuery的siblings选取同胞元素的功能和show、hide功能

posted @ 2015-05-30 13:00  非额  阅读(376)  评论(0)  编辑  收藏  举报