कैसे रखें: तत्व

Question

पर क्लिक करने के बाद सक्रिय सीएसएस शैली मैं एंकर का उपयोग अपनी साइट नेविगेशन के रूप में करता हूं।

<div id='nav'> 
<a href='#abouts'> 
<div class='navitem about'> 
about 
</div> 
</a> 
<a href='#workss'> 
<div class='navitem works'> 
works 
</div> 
</a> 
</div> 

सीएसएस

#nav { 
margin-left: 50px; 
margin-top: 50px; 
text-transform: uppercase; 
} 
.navitem { 
background: #333; 
color: white; 
width: 230px; 
height: 50px; 
font-size: 25px; 
line-height: 50px; 
padding-left: 20px; 
-webkit-user-select: none; 
-moz-user-select: none; 
user-select: none; 
margin-top: 10px; 
} 
.about:hover { 
background: #cc00ff; 
} 
.about:active { 
background: #ff00ff; 
color: #000; 
width: 250px; 
} 
.works:hover { 
background: #0066FF; 
} 
.works:active { 
background: #0099cc; 
color: #000; 
width: 250px; 
} 

मैं कैसे div तत्व शैली रखने के लिए सोच रहा हूँ रखें: जब तक मैं एक और नेविगेशन बार आइटम मारा एक बार क्लिक करने के बाद सक्रिय राज्य, तो यह कैसे करना है ?

Answer 1

आप की तरह वे :active वर्ग के हैं, तो आप इसलिए यदि आप .example में एक लिंक :visited वर्ग :active के रूप में ही परिभाषित करना चाहिए तो आप कुछ इस तरह करते हैं देखने के लिए अपने लिंक रखना चाहते हैं:

a.example:active, a.example:visited { 
/* Put your active state style code here */ } 

Link visited Pseudo Class का उपयोग नाम के अनुसार विज़िट किए गए लिंक का चयन करने के लिए किया जाता है। http://reference.sitepoint.com/css/pseudoclass-target

यह सभी आधुनिक ब्राउज़रों द्वारा समर्थित है:

Answer 2

:target -pseudo चयनकर्ता इस प्रकार की स्थितियों के लिए किया जाता है। कुछ IE संस्करणों को समझने के लिए आप Selectivizr

Here is a tab example:target -pseudo चयनकर्ता के साथ कुछ उपयोग कर सकते हैं।

Answer 3

आप अपने नेविटम्स के सीएसएस वर्गों को जोड़ने और निकालने के लिए जावास्क्रिप्ट का एक छोटा सा उपयोग कर सकते हैं। स्टार्टर्स के लिए, एक सीएसएस क्लास बनाएं जिसे आप सक्रिय तत्व पर लागू करने जा रहे हैं, इसे नाम दें यानी: ".activeItem"। फिर, अपने प्रत्येक नेविगेशन बटन 'ऑनक्लिक ईवेंट में एक जावास्क्रिप्ट फ़ंक्शन डालें जो सक्रिय "सक्रिय" वर्ग को सक्रिय करने के लिए जा रहा है, और अन्य लोगों से हटा रहा है ...

इसे इस तरह दिखना चाहिए: (अनचाहे !)

/*In your stylesheet*/ 
.activeItem{ 
    background-color:#999; /*make some difference for the active item here */ 
} 


/*In your javascript*/ 
var prevItem = null; 
function activateItem(t){ 
    if(prevItem != null){ 
     prevItem.className = prevItem.className.replace(/{\b}?activeItem/, ""); 
    } 
    t.className += " activeItem"; 
    prevItem = t; 
} 

<!-- And then your markup --> 
<div id='nav'> 
<a href='#abouts' onClick="activateItem(this)"> 
<div class='navitem about'> 
about 
</div> 
</a> 
<a href='#workss' onClick="activateItem(this)"> 
<div class='navitem works'> 
works 
</div> 
</a> 
</div> 

Answer 4

कम्बाइन जे एस & सीएसएस:

button{ 
    /* 1st state */ 
} 

button:hover{ 
    /* hover state */ 
} 

button:active{ 
    /* click state */ 
} 

button.active{ 
    /* after click state */ 
} 


jQuery('button').click(function(){ 
    jQuery(this).toggleClass('active'); 
}); 

Answer 5

मैं यह पता लगा। सरल, प्रभाव कोई jquERY

हम एक छिपे हुए चेकबॉक्स का उपयोग करने जा रहे हैं।
यह उदाहरण एक "क्लिक पर - बंद क्लिक 'मंडराना/सक्रिय' राज्य" भी शामिल है

-

ही क्लिक करने योग्य सामग्री बनाने के लिए:

एचटीएमएल

<input type="checkbox" id="activate-div"> 
    <label for="activate-div"> 
    <div class="my-div"> 
     //MY DIV CONTENT 
    </div> 
    </label> 

सीएसएस

#activate-div{display:none} 

.my-div{background-color:#FFF} 

#activate-div:checked ~ label 
.my-div{background-color:#000} 

बटन परिवर्तन सामग्री बनाने के लिए:

एचटीएमएल

<input type="checkbox" id="activate-div"> 
    <div class="my-div"> 
     //MY DIV CONTENT 
    </div> 

<label for="activate-div"> 
    //MY BUTTON STUFF 
</label> 

सीएसएस

#activate-div{display:none} 

.my-div{background-color:#FFF} 

#activate-div:checked + 
.my-div{background-color:#000} 

आशा है कि यह मदद करता है !!