jq切换选择项

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    ul>li {

      background-color: #999;

      margin: 20px;

    }

    ul>li.active{

      background-color: greenyellow;

    }

  </style>

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

  <ul id="demo">

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

  </ul>

</body>

<script>

  $(function(){

    $('#demo>li').on('click',function(){

      $(this).addClass('active');

      $(this).siblings().removeClass('active');

    })

  })

</script>

</html>
巴特西

jq切换选择项

最新文章

热门文章
