1、常用的适用场景:多个超链接标签之间,通过点击实现页面跳转。
2、具体代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 20px; margin: 0; } li { width: 60px; height: 10px; border-radius: 10px; list-style: none; text-align: center; line-height: 8px; font-size: 30px; margin-bottom: 10px; } /*鼠标移入样式改变*/ li:hover { background-color: #2887f0; color: #fff; } /*添加class=“active”之后的样式*/ .active { background-color: #2887f0; color: #fff; } </style> </head> <body> <ul> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </body> </html> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> // 给所有的li绑定点击事件:1、删除所有的class名;2、对当前点击的li添加class=“active”。 $("li").click(function() { $("li").removeClass(); $(this).addClass("active") }) </script>
3. 效果如下: