JQ选项卡继续深入理解

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        p{
            display: none;
        }
        p.active{
            display:block;
            color:#ff6700;
        }
    </style>
</head>
<body>
    <ul>
        <li>alex1</li>
        <li>alex2</li>
        <li>alex3</li>
        <li>alex4</li>
    </ul>
    <p>alex1</p>
    <p>alex2</p>
    <p>alex3</p>
    <p>alex4</p>
    <script type="text/javascript" src="jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $('ul li').click(function(){
            $(this).css('color','red').siblings('li').css('color','black');
            console.log($(this).index())
            $('p').eq($(this).index()).addClass('active').siblings('p').removeClass('active')

        })
    </script>
</body>
</html>

 

posted @ 2019-06-20 10:49  Kerry_Yuan  阅读(173)  评论(0)  编辑  收藏  举报