<!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> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script> <style> #tabs{ background-color:rgb(83, 82, 82); width: 500px; } #tabs > li { list-style:none; display: inline-block; width:15%; color:white; cursor:pointer; } #tabsContent > div{ border: 1px solid; height:100px; width:500px; display:none; } li.active{ color:red !important; } div.active{ display:block !important; } </style> </head> <body> <ul id = 'tabs'> <li data-tab="users">Users</li> <li data-tab='groups'>Groups</li> </ul> <div id='tabsContent'> <div data-tab='users'>users...</div> <div data-tab='groups'>groups...</div> </div> <script> jQuery.fn.tabs = function(control){ var element = $(this); var control = $(control); element.delegate('li','click',function(){ var tabName = $(this).attr('data-tab'); element.trigger('change.tabs',tabName); //trigger 可以触发自定义事件 }) //bind 可以绑定自定义事件 element.bind('change.tabs',function(e,tabName){ element.find('li').removeClass('active'); element.find(">[data-tab='"+tabName+"']").addClass('active'); control.find(">[data-tab]").removeClass('active'); control.find(">[data-tab='"+tabName+"']").addClass('active'); }); // element.bind('change.tabs',function(e,tabName){ // }); var firstName = element.find('li:first').attr('data-tab'); element.trigger('change.tabs',firstName); return this; } $(function(){ $('#tabs').tabs('#tabsContent'); }) </script> </body> </html>