บทความนี้แนะนำการตรวจสอบการเลื่อน Bootstrap เพื่อให้ทุกคนเรียนรู้ เนื้อหาเฉพาะมีดังนี้
การตรวจสอบเลื่อนพร้อมกับการเลื่อนแถบเลื่อนรายการรายการจะถูกสลับและเปิดใช้งานอย่างต่อเนื่อง
<!-id = "เมนู" เป็นวัตถุการฟังสำหรับ data-target = "#เมนู"-> <!-แถบการนำทางที่ได้รับการแก้ไข Navbar Navbar-inner Navbar-Fixed-Fixed-Top-> <div> <li> <li> <a href = "#1"> list1 </a> </li> <li> <li> <li> dropdown-menu dropdown-menu เรียกพฤติกรรม pulldown-> <a href = "#" data-toggle = "dropdown" เมนู Dropdown <b> </b> </a> <ul> <li> <a href = "#3"> รายการ 3 </a> </li> <li> 5 </a> </li> </li> </li> </div> </div> <!-data-spy = "scroll" ตั้งค่าแอตทริบิวต์ข้อมูลสำหรับวัตถุการฟัง-> <!-data-target = "#menu" ตั้งค่าวัตถุ-> <! 1 </h3> <p> <img src = "img/1.jpg"> </p> <h3 id = "2"> รายการ 2 </h3> <p> <img src = "img/2.jpg"> </p> <h3 id = "3"> รายการ 3 </h3> <p> id = "4"> รายการ 4 </h3> <p> <img src = "img/4.jpg"> </p> <h3 id = "5"> รายการ 5 </h3> <p> <img src = "img/5.jpg"
การตรวจสอบเลื่อน
<body data-spy = "scroll" data-target = "#navbar" data-offset = "0"> <div id = "navbar"> <ul> <li> <a href = "#1"> list1 </a> </li> <li> <a href = "#" data-toggle = "dropdown"> เมนูแบบเลื่อนลง <b> </b> </a> <ul> <li> <a href = "#3"> list3 </a> </li> <li> <a href = "#4"> list4 </a> </li> </ul> </div> <!-data-spy = "Scroll" ตั้งค่าแอตทริบิวต์ข้อมูลสำหรับการฟังวัตถุ-> <!-data-target = "#เมนู" ตั้งค่าวัตถุการฟัง-> <!-data-offset = "30" ตั้งค่าออฟเซ็ต-> <div> id = "2"> รายการ 2 </h3> <p> <img src = "img/2.jpg"> </p> <h3 id = "3"> รายการ 3 </h3> <p> <img src = "img/3.jpg"> </p> <h3 id = "4" <h3 id = "5"> รายการ 5 </h3> <p> <img src = "img/5.jpg"> </p> </div>
สไตล์ CSS
#NAVBAR {ตำแหน่ง: แก้ไข; ขวา: 10px; ด้านบน: 50px; ความกว้าง: 200px; พื้นหลังสี: #FFF;}เรียกว่า:
คนแรก: ใช้วิธี data-spy =” scroll” วิธีการข้างต้นคือ
ประเภทที่สอง: ใช้การโทร JS
HTML เพียงแค่ลบ data-spy =” Scroll”
$ (function () {$ ("body"). scrollspy (); // เมื่อมีการเปิดใช้งานรายการแถบการนำทางใหม่, $ ("body"). on ("เปิดใช้งาน", ฟังก์ชั่น (e) {ถ้า (e.target && $ (e.target) .hasclass ("dropdown")) "บล็อก");หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อเรียนรู้และแนบหัวข้อที่ยอดเยี่ยมให้คุณ: การสอนการเรียนรู้ bootstrap
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript