jq切換選擇項
阿新 • • 發佈:2019-02-21
gin mar back cdn fun .com class move boot
<!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切換選擇項