부트 스트랩의 탭 제어는 개발자들 사이에서 단순성과 사용 편의성으로 매우 인기가 있습니다. 그러나 그 스타일은 비교적 단일이므로 원래 형태를 기반으로 더 아름다운 효과를 얻을 수있는 방법은 무엇입니까? 나는이 문제를 고려하고있다. 또한 부트 스트랩의 탭은 각 탭을 클릭하여 전환을 달성해야합니다. jQuery를 사용하여 자동 스위칭을 제어하고 일정 기간 (예 : 5 초) 후 한 탭에서 다른 탭으로 전환 할 수 있습니까? 다음은 내 구현 프로세스입니다. 우선 탭 부분의 HTML 코드입니다.
<div role = "tabpanel"> <!-NAV 탭-> <ul 역할 = "TACKIST"Style = "Margin-Top : 0px;" id = "doctabs"> <li role = "presentation"> <a href = "#section_new"aria-controls = "home"robel = "탭"data-toggle = "tab"> 최신 </a> <li role = "presentation"> <a href = "#section_week"aria-controls = "profim" "탭"탭 "탭" "탭" "탭" "탭. 역할 = "프레젠테이션"> <a href = "#href ="#section_month "aria-controls ="message "robile ="tab "data-toggle ="tab "> 30 일 안에 인기 </a> </ul> <!-탭 panes-> <div> <div 역할 ="tabpanel "id ="section_new "> <p>
Tab1의 내용
</p> </div> <div 역할 = "tabpanel"id = "section_week"> <p>
Tab2의 내용
</p> </div> <div 역할 = "tabpanel"id = "section_month"> <p>
Tab3의 내용
</p> </div> </div> </div>
이 코드는 기본적으로 부트 스트랩의 기본 코드와 동일합니다. 너무 많은 변경을 할 필요는 없으며 자신의 데이터를 작성하십시오.
탭 스타일을 설정하겠습니다. 이 스타일은 Bootstrap의 원래 스타일을 덮어 써서 아름답게하는 탭의 효과를 달성합니다.
<스타일 유형 = "text/css">. tab .nav-tabs {border-bottom : 0 없음; 배경 : #Eaea;}. 탭 .nav-tabs li a {border : transparent; border-radius : 0; font-size : 16px; border : none; color : #333; 패딩 : 12px 22px;}. .nav-tabs li.active ai {border : 0 없음; 배경 : #e67e22; color : #fff;}. 탭 .nav-tabs .nav-tabs li.active a : {content : ""; 위치 : 왼쪽; 왼쪽; 왼쪽; 왼쪽; 왼쪽; 왼쪽; 왼쪽; 왼쪽; 왼쪽; 왼쪽; -14px; 경계 : 7px 고체-타프 : 7px #e67e22;}. .tab-content {패딩 : 5px; 색상 : #5a5c5d; font-size : 14px; line-height : 20px; margin-top : 5px; border-bottom : 1px solid #e67e22;}@미디어 전용 스크린 및 (max-width : 480px) {.Tab .nav-tabs. 100%; 배경 : 투명한;}. 탭 .nav-tabs li.active a {border-radius : 10px 10px 0;}. 탭 .nav-tabs li : first-child a {border-bottom-left-radius : 0;}. tab .nav-tabs li a {margin-bottom : 10px; A : {border : none;}} 이후. </style>효과가 나오면 다음과 같이 보입니다.
원래 스타일의 부트 스트랩보다 낫습니까 (그러나 모두가 자신의 선호도가 있습니다. 구현 프로세스에 대한 소개 만 있습니다. 물론 CSS를 수정하여 다른 스타일을 만들 수도 있습니다).
탭의 자동 전환을 구현하는 방법을 살펴 보겠습니다. 더 이상 고민하지 않고 코드를 입력하십시오.
// 탭 자동 회전 함수 타이머 (i) {interval = setInterVal (function () { "#docTabs li : eq ("+i+") a"). 탭 ( 'show'); i ++; if (i> 2) i = 0;}, 5000); var I = 0; tireat (i); // roun (i); 목록 영역에서 호버링 (function () {clearinterval (interval (interval);}); // 계속 회전 $ ( ". tab-pane"). 마우스 아웃 (function () {timer (i);});});위의 것은 편집자가 소개 한 부트 스트랩의 탭 컨트롤의 미화 및 개선입니다 (권장). 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!