复主代码 代码如下: jQuery 자체 정의义选项卡插件<br>body, ul { padding:0; 여백:0; }<br>li { 목록 스타일:없음; }<br>#tabs { 확대/축소:1; }<br>#tab:after { 내용:""; 표시:블록; 지우기:둘 다; }<br>#tabs li { float:left; 패딩:10px; 색상:#FF8900; 배경:#FFF; 커서:포인터; }<br>#tabs .active { 배경:#FF8900; 색상:#FFF; }<br>#tabContent { 배경:#FF8900; 색상:#FFF; 패딩:10px; 지우기:둘 다; }<br>#tabContent div { 디스플레이:없음; }<br>#tabContent div.active { 디스플레이:블록; }<br> 사용자 그룹 사용자 콘텐츠 그룹 콘텐츠 <br>jQuery.fn. tabs = function (control) {<br> var element = $(this);<br> var control = $(control);<br><br> element.delegate('li', 'click', function () {<br> // 遍历选项卡name称<br> var tabName = $(this).attr('data-tab');<br><br> // 点击选项卡时触发自定义事<br> 요소 .trigger('change.tabs', tabName);<br> });<br><br> // 绑定到自定义事件<br> element.bind('change.tabs', function (ev, tabName) ) {<br> element.find('li').removeClass('active');<br> element.find('>[data-tab=' tabName ']').addClass('active'); <br> });<br><br> element.bind('change.tabs', function (ev, tabName) {<br> control.find('>[data-tab]').removeClass(' active');<br> control.find('>[data-tab=' tabName ']').addClass('active');<br> });<br><br> // 激活第 1个选项卡<br> var firstName = element.find('li:first').attr('data-tab');<br> element.trigger('change.tabs', firstName);<br><br> 이것을 돌려주세요;<br>};</p> <p>jQuery(함수 ($) {<br> $('#tabs').tabs('#tabContent');<br><br> $('#tab').bind('change.tabs' , function (ev, tabName) {<br> window.loaction.hash = tabName;<br> });<br><br> $(window).bind('hashchange', function () {<br> var tabName = window.location.hash.slice(1);<br> $('#tabs').trigger('change.tabs', tabName);<br> });<br>});<br> <br></p> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
