बूटस्ट्रैप एनएवी लिंक को निष्क्रिय

Question

बनाने के लिए कैसे करें मैं एक विज़ार्ड प्रगति संकेतक के लिए बूटस्ट्रैप नेविगेशन बार का उपयोग कर रहा हूं। मैं यह सुनिश्चित करना चाहता हूं कि विज़ार्ड के चरण जिन्हें अभी तक नहीं देखा गया है, क्लिक करने योग्य नहीं हैं। मैं उन्हें नौसेना बार में दिखाना चाहता हूं, लेकिन उन्हें बाहर निकाला जाना चाहिए और लिंक अक्षम हो जाएंगे। क्या यह बूटस्ट्रैप नेविगेशन बार में किया जा सकता है?

$(document).ready(function() { 
    $(".nav li.disabled a").click(function() { 
    return false; 
    }); 
}); 

एक और तरीका बदल रहा है:

<ul class="nav nav-list"> 
    <li class="disabled"><a href="index.html">...</a></li> 
</ul> 

हालांकि, उपयोगकर्ताओं को क्लिक कर उन्हें अस्वीकृत करने के लिए, आप JavaScript इसे रोकने के लिए उपयोग करना चाहिए:

Answer 1

आप कंटेनर <li> को disabled वर्ग में जोड़ सकते हैं href संपत्ति एंकर (#) अस्थायी रूप से।

Answer 2

ऐसा करने का सही तरीका nchor टैग का उपयोग href विशेषता के बिना कर रहा है।

हालांकि यह एक शायद ही ज्ञात तकनीक है, यह पूरी तरह से वैध HTML है और <a> टैग के लिए जिम्मेदार सभी स्टाइल के साथ एक तत्व की ओर जाता है लेकिन कोई लिंकिंग कार्यक्षमता नहीं है। ,

एक तत्व कोई href विशेषता है, तो तत्व जहां एक लिंक अन्यथा रखा गया हो सकता है के लिए एक प्लेसहोल्डर का प्रतिनिधित्व करता है अगर यह किया गया था:

<ul class="nav nav-list"> 
    <li><a>...</a></li> 
</ul> 

तकनीकी पृष्ठभूमि के लिए W3C's HTML specification देखें प्रासंगिक, केवल तत्व की सामग्री से मिलकर।

Answer 3

मैं जोड़ना चाहता हूं कि केवल अक्षम जोड़ने से नेविगेशन को रोका नहीं जाएगा। इसके अतिरिक्त, उत्तर jquery समाधान काम करेगा, हालांकि यदि आप अक्षम वर्ग को जोड़ते या हटाते हैं, तो यह हैंडलर को अनबिंड नहीं करेगा।

यह jquery के .on विधि का उपयोग करने के लिए ईवेंट हैंडलर को बदलकर हल किया जा सकता है।

$('body').on('click', '.disabled', function(e) { 
    e.preventDefault(); 
    return false; 
}); 

यह विकलांग द्वारा शरीर के लिए कोई हैंडलर (अपने कंटेनर के साथ शरीर को बदलने के लिए सुनिश्चित कर लें) और फिल्टर जुड़ जाता है। किसी भी समय शरीर पर क्लिक किया जाता है, यदि क्लिक किया गया है तो अक्षम किया गया है, यह क्लिक को रोकता है।

अधिक जानकारी के लिए http://api.jquery.com/on/ देखें।

Answer 4

href में अपना मूल्य सुरक्षित रखने के लिए। आप ऑनक्लिक = "वापसी झूठी;" का उपयोग कर सकते हैं एंकर टैग टॉगल करने के लिए। मेनू आइटम को ग्रे करने के लिए बूटस्ट्रैप अक्षम सीएसएस क्लास का उपयोग करें।

var enableMyLink = false; 
 

 
if (enableMyLink) { 
 
    $("li").removeClass("disabled").find("a").removeAttr("onclick"); 
 
} else { 
 
    $("li").addClass("disabled").find("a").attr("onclick", "return false;"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<li> 
 
    <a href="http://sample.com/">My Link</a> 
 
</li>

Answer 5

सबसे पहले, आप उल करने के लिए एक आईडी जोड़ना चाहिए:

<ul class="nav navbar-nav navbar-right" id="someId"> 
      <li><a>Element</a></li> 
</ul> 

आप ul छिपा कर सकते हैं, उदाहरण के द्वारा:

$(document).find('ul#someId').hide(); 

और जब आप इच्छा है, आप उल दिखा सकते हैं:

$(document).find('ul#someId').show(); 

Answer 6

एक नौसेना लिंक को अक्षम करने के लिए आपको ली और टैग दोनों को अक्षम करने की आवश्यकता है। लेकिन रेज़र सिंटैक्स का उपयोग करते समय यह थोड़ा मुश्किल साबित हो सकता है। अक्षम वर्ग को ली में जोड़ना ठीक काम करता है लेकिन यह किसी टैग पर कार्रवाई को अक्षम नहीं करता है। तो, gustavohenke समाधान के समान लेकिन थोड़ा परिष्कृत यह आपके दस्तावेज़ तैयार फ़ंक्शन में आज़माएं।

$(".nav li.disabled a").prop("disabled",true)

Answer 7

यह सीएसएस में पूरी तरह से किया जा सकता है pointer-events संपत्ति के साथ (जब तक आप यानी < 11 का समर्थन करने की जरूरत है)। हालांकि, a के लिए पॉइंटर ईवेंट बंद करके मुझे अब भी अनुमति नहीं है कर्सर, इसलिए मैंने इसे अक्षम li पर सेट किया है। (मैं जानता हूँ कि इस सवाल का काफी पुराना है, लेकिन अभी भी पहले खोज परिणाम है)

यह उस उद्देश्य के लिए मेरी एससीएसएस है:

ul.nav { 
    li.disabled { 
     cursor: not-allowed; 

     a { 
      pointer-events: none; 
     } 
    } 
} 

[विकलांग लटकती मेनू चहचहाना बूटस्ट्रैप का उपयोग कर आइटम] (http के