बूटस्ट्रैप और jquery

Question

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

$(document).ready(function() { 
 
    $('#navlist a').click(function(e) { 
 
     e.preventDefault(); 
 
     $('#navlist a').removeClass('active'); 
 
     $(this).addClass('active'); 
 
    }); 
 

 
    });

.nav { 
 
    color: green; 
 
} 
 
.active { 
 
    color: red; 
 
}

<ul class="list-unstyled" id="navlist"> 
 
    <li id="home"><a class="nav" href="#">Home</a> 
 
    </li> 
 
    <li id="about"><a class="nav" href="#">About Us</a> 
 
    </li> 
 
</ul>

fiddle

Answer 1

इस कोड का प्रयास करें चाहते हैं इस सीएसएस -

a.nav:link { color: green; } 
a.active:link { color: red; } 

यहाँ बेला है - https://jsfiddle.net/yLpn2nmb/3/

Answer 2

यह एक और शैली हो सकता है इस तरह के #navlist a { color: #000; } के रूप में कहीं और अपने कोड है कि आपके .active वर्ग अधिभावी है:

बदलने का प्रयास करें:

.active { 
    color: red; 
} 

करने के लिए:

#navlist a.active { 
    color: red; 
} 

या:

#navlist a.nav.active { 
    color: red; 
} 

इस वर्ग की specificity है, जो किसी भी अन्य वर्ग है कि यह अधिभावी किया जा सकता है ओवरराइड करना चाहिए वृद्धि होगी।

नोट: आप कहते हैं कि वास्तविक jQuery के रूप में की उम्मीद तो मैं आपके प्रश्न के सीएसएस पहलू पर विशुद्ध रूप से ध्यान केंद्रित किया है काम कर रहा है ...

Answer 3

इस

$(document).ready(function(){ 
$('.nav').click(function(e) { 
    e.preventDefault(); 
    $(this).removeClass('active'); 
    $(this).addClass('active'); 
}); 

}); 

की तरह कुछ की कोशिश करो मुझे लगता है कि है

$(document).ready(function(){ 
       $('#navlist a').click(function(e) { 
       e.preventDefault(); 
       $('#navlist a').removeClass('active'); 
       $('#navlist a').addClass('nav'); 
       $(this).toggleClass('nav'); 
       $(this).toggleClass('active'); 
      }); 
}); 

और - आप क्या होने की