การควบคุมแท็บใน bootstrap เป็นที่นิยมมากในหมู่นักพัฒนาเพื่อความเรียบง่ายและความสะดวกในการใช้งาน อย่างไรก็ตามสไตล์ของมันค่อนข้างเดี่ยวมันจะได้รับเอฟเฟกต์ที่สวยงามมากขึ้นตามรูปแบบดั้งเดิมได้อย่างไร? ฉันกำลังพิจารณาปัญหานี้ นอกจากนี้แท็บใน Bootstrap จะต้องคลิกแต่ละแท็บเพื่อให้ได้การสลับ คุณสามารถใช้ jQuery เพื่อควบคุมการสลับอัตโนมัติและปล่อยให้มันสลับจากแท็บหนึ่งไปยังอีกแท็บหลังจากระยะเวลาหนึ่ง (เช่น 5 วินาที)? ต่อไปนี้เป็นกระบวนการใช้งานของฉันก่อนอื่นรหัส HTML ของส่วนแท็บ:
<div role = "TabPanel"> <!-แท็บ NAV-> <ul role = "tablist" style = "margin-top: 0px;" id = "doctabs"> <li role = "การนำเสนอ"> <a href = "#section_new" aria-controls = "home" role = "tab" data-toggle = "tab"> ล่าสุด </a> <li role = "การนำเสนอ" tab = "tab =" tab = " role = "การนำเสนอ"> <a href = "#section_month" aria-controls = "ข้อความ" role = "แท็บ" data-toggle = "แท็บ"> เป็นที่นิยมใน 30 วัน </a> </ul> <!
เนื้อหาใน tab1
</p> </div> <div role = "TabPanel" id = "Section_week"> <p>
เนื้อหาใน tab2
</p> </div> <div role = "tabpanel" id = "section_month"> <p>
เนื้อหาใน tab3
</p> </div> </div> </div>
รหัสเหล่านี้มักจะเหมือนกับรหัสดั้งเดิมใน bootstrap คุณไม่จำเป็นต้องทำการเปลี่ยนแปลงมากเกินไปเพียงกรอกข้อมูลของคุณเอง
มาตั้งค่าสไตล์แท็บกันเถอะ สไตล์เหล่านี้จะเขียนทับสไตล์ดั้งเดิมใน bootstrap เพื่อให้ได้ผลของแท็บสวยงาม
<style type = "text/css">. tab .nav-tabs {border-bottom: 0 none; พื้นหลัง: #eaeaea;}. tab. nav-tabs li a {เส้นขอบ: โปร่งใส; Border-Radius: 0; font-size: 16px; border: ไม่มีสี: #333; li.active ai {border: 0 none; พื้นหลัง: #e67e22; สี: #fff;}. tab .nav-tabs .nav-tabs li.active a: หลังจาก {เนื้อหา: ""; ตำแหน่ง: Absolute; 45%; ด้านล่าง: -14px; ชายแดน: 5PX; สี: #5A5C5D; FONT-SIZE: 14PX; LINE-HEIGHT: 20PX; margin-top: 5px; ขอบล่าง: 1px Solid #E67E22;}@Media Screen เท่านั้นและ (Max-Width: 480px) .nav-tabs li.active a {border-radius: 10px 10px 0 0;}. แท็บ. nav-tabs li: ลูกคนแรก A {ชายแดน-ล่างซ้าย----ไรเดอัส: 0;}. แท็บ. nav-tabs li {margin-bottom: 10px; ไม่มี;}} </style>หลังจากเอฟเฟกต์ออกมาดูเหมือนว่า:
มันดีกว่ารูปแบบดั้งเดิมของ bootstrap (แต่ทุกคนมีความชอบของตัวเองนี่เป็นเพียงการแนะนำกระบวนการดำเนินการแน่นอนคุณสามารถสร้างสไตล์อื่น ๆ ได้โดยการปรับเปลี่ยน CSS)
ลองมาดูวิธีการใช้การสลับแท็บอัตโนมัติ โดยไม่ต้องกังวลใจเพิ่มเติมเพียงป้อนรหัส:
// แท็บตัวจับเวลาฟังก์ชั่นการหมุนอัตโนมัติ (i) {interval = setInterval (ฟังก์ชัน () {$ ("#doctabs li: eq ("+i+") a"). แท็บ ('แสดง'); i ++; ถ้า (i> 2) i = 0;}, 5000); ในพื้นที่รายการ MouseOver (function () {ClearInterval (Interval);}); // ดำเนินการหมุนต่อ $ (". tab-pane"). mouseout (ฟังก์ชัน () {ตัวจับเวลา (i);});});ข้างต้นคือการตกแต่งและการปรับปรุงการควบคุมแท็บใน bootstrap แนะนำให้คุณรู้จักโดยตัวแก้ไข (แนะนำ) ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!