<html> <head> <script src="js/jquery.js" type="text/javascript"></script> </head> <body> <style> .list_1{color:red} .list_2{color:green} .list_3{color:blue} .list_4{color:#666} </style> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <button class="b1">方式一提交</button> <button class="b2">方式二提交</button> <script> $(document).ready(function () { $(".b1").click(function () { $('ul li').toggleClass(function () { return 'list_' + $(this).index(); }); }); $(".b2").click(function () { $('ul li').toggleClass(function (index) { return 'list_' + index; }); }); }) </script> <body> </html>
两种方式效果一致。
$(selector).toggleClass(function(index,class),switch) 其中index可选，接受选择器的位置。
jquery index() 方法返回指定元素相对于其他指定元素的 index 位置。