ฉันจะปล่อยให้ยา nav-pill ที่ถูกคลิกยังคงทำงานอยู่โดยใช้ bootstrap ได้อย่างไร

ด้านล่างนี้คือวิธีที่ฉันสร้างลิงก์เมนูของเว็บไซต์ของฉันโดยใช้ Bootstrap 3.1.0 ฉันต้องการให้ยาเม็ดที่เลือกยังคงทำงานอยู่/เลือกในขณะที่คลิกลิงก์ ในปัจจุบัน สีโฮเวอร์ที่กำหนดไว้จะหายไปหลังจากคลิกลิงก์ มีวิธีให้เม็ดยายังคงทำงานอยู่หลังจากคลิกหรือไม่?

<ul id="menu_area" class="nav nav-pills nav-justified custom">
    <li><a href="/th#/knowing_us" id="menu_text">one</a></li>
    <li><a id="menu_text">two</a></li>
    <li><a id="menu_text">three</a></li>                                                    
</ul>

===อัปเดต===

ฉันเพิ่งใหม่กับ JS และการพัฒนาเว็บ รหัสที่ฉันพยายามติดตามบทช่วยสอน Bootstrap ของ Twitter อยู่ที่นี่: http://jsfiddle.net/Dy9e6/

ฉันแค่ต้องการให้ยา nag-pill ที่ถูกคลิกแสดงเป็น 'เลือก' หรือ 'เน้น' หลังจากที่ผู้ใช้คลิกที่ยา/แท็บอันใดอันหนึ่ง


javascript css twitter-bootstrap twitter-bootstrap-3 nav
person Kann    schedule 09.02.2014    source แหล่งที่มา
comment
คำถามของคุณไม่ชัดเจนสำหรับฉัน อาจสร้างการสาธิตที่ jsfiddle.net เพื่อแสดงปัญหา   -  person isherwood    schedule 09.02.2014
comment
isherwood ขอบคุณที่แนะนำ jsfiddle.net ให้ฉัน ฉันเพิ่งโพสต์รหัสของฉันตามลิงค์ที่ฉันเพิ่มในโพสต์ของฉัน   -  person Kann    schedule 10.02.2014

คำตอบ (1)


arrow_upward
14
arrow_downward

ขั้นแรกคุณต้องเพิ่มค่าเริ่มต้น class="active" ให้กับองค์ประกอบแรก
ประการที่สอง คุณต้องเพิ่ม data-toggle="tab" ให้กับองค์ประกอบ <a /> ดูเอกสาร

รหัสของคุณกลายเป็น:

<ul id="menu_area" class="nav nav-pills nav-justified custom">
    <li class="active"><a href="/th#knowing_us" data-toggle="tab" id="menu_text">one</a></li>
    <li><a href="/th#knowing_us2" data-toggle="tab" id="menu_text">two</a></li>
    <li><a href="/th#knowing_us3" data-toggle="tab" id="menu_text">three</a></li>                                                    
</ul>

สาธิต

person Rahil Wazir    schedule 09.02.2014
comment
นี่เป็นวิธีที่สง่างามมาก! แม้ว่าฉันจะไม่สามารถทำซ้ำโดยใช้ Bootstrap 4 ได้ - person paulywill; 09.08.2017