แท็บที่ใช้งานอยู่ไม่แสดงขีดเส้นใต้เมื่ออยู่ใน Modal แม้ว่าฉันจะให้แท็บใดแท็บหนึ่งเป็น class จาก active ก็ตาม อย่างไรก็ตาม เมื่อฉันคลิกที่แท็บใดแท็บหนึ่ง มันก็เริ่มทำงาน ประเด็นคืออะไร?
นี่คือ JSFiddle
และนี่คือจุดที่ฉันตั้งชื่อ class ที่ถูกต้องให้กับองค์ประกอบ:
...
<a class="active" href="/th#test1">Test 1</a>
...
ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชม
ขีดเส้นใต้จะแสดงหากคุณเริ่มต้นแท็บโดยใช้ตัวเลือก ready ของหน้าต่าง Modal
บางสิ่งเช่นนี้:
$('.modal-trigger').leanModal({
ready: function () {
$('ul.tabs').tabs();
}
});
นี่คือซอ: https://jsfiddle.net/powxw392/
หากคุณต้องการภาพเคลื่อนไหวเล็กน้อยเมื่อคุณเปิดหน้าต่างโมดอล ให้วางการเริ่มต้นแท็บไว้นอกฟังก์ชันโมดอล และเพิ่มเหตุการณ์การคลิกดังนี้:
$('ul.tabs').tabs();
$('.modal-trigger').leanModal({
ready: function () {
$('#firstTab').click();
}
});
ซอ: https://jsfiddle.net/qj0r84dr/
ทั้งสองตัวเลือกจะช่วยให้คุณสามารถเก็บภาพเคลื่อนไหวของเส้นใต้ที่ย้ายจากแท็บหนึ่งไปอีกแท็บหนึ่งได้
เหตุผลที่คุณไม่เห็นขีดเส้นใต้ก็เพราะว่าไม่มีการขีดเส้นใต้
บรรทัดที่คุณเห็นคือ div ที่มีคลาส indicator ซึ่งจะย้ายตามโปรแกรมไปยังแท็บใดก็ตามที่ถูกเลือก
อย่างที่ฉันเห็น คุณสามารถ แทนที่ตัวบ่งชี้ด้วย CSS ของคุณเอง:
.tabs .indicator { display: none; }
.tabs .tab a.active { border-bottom: 2px solid #f6b2b5; }
ปัญหาคือคุณสูญเสียแอนิเมชั่น
คุณยังสามารถ กำหนดตำแหน่งของตัวบ่งชี้ด้วยตนเอง:
$('#modal1').find('.indicator').attr('style', 'right: 415.333px; left: 0px;');
ปัญหาของอันนี้คือมันสกปรกนิดหน่อย
อัปเดตซอ (พร้อมตัวเลือกที่สอง)
